body {
    background-color: #222222;
    color: #eee;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 14px;
    line-height: 1.42857;
}
body { margin: 0; overflow-x: hidden; }
html { max-width: 100%; overflow-x: hidden; }

/* Keep normal wheel, touch and keyboard scrolling, but hide the browser scrollbar. */
html, body {
    scrollbar-width: none;
    -ms-overflow-style: none;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

* { box-sizing: border-box; }

/* Original Upunkt link style */
a.frontpagemenu,
a.frontpagemenu:visited {
    color: #cccccc;
    cursor: pointer;
    font-family: Arial;
    font-size: 14px;
    text-decoration: none;
    text-transform: none;
    line-height: 150%;
    text-shadow: 0 0 0 rgba(0,255,255,0);
    transition: color .14s ease, text-shadow .14s ease;
}
a.frontpagemenu:hover,
a.frontpagemenu:focus-visible {
    color: #fff;
    outline: 0;
    text-shadow: 0 0 10px rgba(0,255,255,.62);
}

a.hmpmenu, a.hmpmenu:hover, a.hmpmenu:visited {
    color: #0ff;
    cursor: pointer;
    font-family: Arial;
    font-size: 14px;
    text-decoration: underline;
    text-transform: none;
    line-height: 150%;
}

a.hmplink, a.hmplink:hover, a.hmplink:visited {
    color: #0ff;
    cursor: pointer;
    font-family: Arial;
    font-size: 14px;
    text-decoration: underline;
    text-transform: none;
    line-height: 150%;
}

a.hmplink2, a.hmplink2:hover, a.hmplink2:visited {
    color: #0ff;
    cursor: pointer;
    font-family: Arial;
    font-size: 14px;
    text-decoration: none;
    text-transform: none;
    line-height: 150%;
}

.h1, h1 { font-size: 18px; color: #0ff; }
.h11, h11 { font-size: 22px; color: #0ff; }
.h2, h2 { font-size: 20px; }
.soldout, soldout { font-size: 12px; color: #ccc; }

.form-control::-moz-placeholder { color: #000; opacity: 0.2; }
.form-group.required .control-label:after { 
    color: #d00;
    content: "*";
    position: absolute;
    margin-left: 8px;
    top:7px;
}

.container {
    width: 1170px;
    max-width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding-left: 15px;
    padding-right: 15px;
}
.text-center { text-align: center; }

.upunkt-header {
    position: relative;
    padding-top: 22px;
    padding-bottom: 6px;
}

/* Toplevel signature */
.toplevel-mark {
    position: absolute;
    top: 22px;
    right: 0;
    z-index: 30;
    color: #b7b3ab;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0;
    font: inherit;
    font-size: 9px;
    line-height: 1;
    letter-spacing: -.035em;
    transition: color .2s ease, transform .2s ease;
    white-space: nowrap;
}
.toplevel-mark:visited { color: #b7b3ab; }
.toplevel-mark-star {
    display: inline-block;
    margin-right: 2px;
    font-family: inherit;
    font-size: .82em;
    font-weight: 620;
    line-height: 1;
    transform: translateY(-.02em);
}
.toplevel-mark-text { font-weight: 620; }
.toplevel-mark-arrow {
    display: inline-block;
    margin-left: .5px;
    font-family: inherit;
    font-size: 1em;
    font-style: normal;
    font-weight: 620;
    line-height: 1;
    letter-spacing: -.05em;
    -webkit-text-stroke: 0;
    text-shadow: none;
    transform: translateY(-.02em) scaleX(.84);
    transform-origin: left center;
}
.toplevel-mark:hover,
.toplevel-mark:focus-visible {
    color: #e1ddd5;
    transform: translateX(1px);
    outline: none;
}
@media (max-width: 760px) {
    .upunkt-header { padding-top: 38px; }
    .toplevel-mark {
        top: 10px;
        right: 2px;
        font-size: 8px;
    }
}






























.flash-stack {
    width: 420px;
    max-width: calc(100vw - 30px);
    margin: 12px auto;
    text-align: left;
}
.flash {
    border: 1px solid #555;
    background: #292929;
    color: #ddd;
    padding: 7px 9px;
}
.flash.success { border-color: #007a46; }
.flash.danger { border-color: #9b2c2c; }
.flash.warning { border-color: #9a6a00; }

.google-search-row table { margin-left: auto; margin-right: auto; }
.google-search-row input[type="text"] { max-width: calc(100vw - 120px); outline: none; box-shadow: none; }
.google-search-row input[type="text"]:focus { outline: none !important; box-shadow: none !important; -webkit-box-shadow: none !important; border-color: #777; }
.edit-toolbar { margin-top: 8px; margin-bottom: 8px; min-height: 20px; }
.link-save-status { display: inline; margin-left: 8px; color: #cccccc; font-family: Arial; font-size: 13px; }
.link-undo-wrap[hidden] { display: none !important; }
.link-undo-wrap { display: inline; margin-left: 4px; }

.edit-toolbar .edit-only { display: none; }
body.editing .edit-toolbar .edit-only { display: inline; }
.category-title-row { position: relative; }
.category-title-row h1 { display: inline-block; margin: 0 0 2px; }
.link-row { min-height: 19px; }
body.editing .category-title-row, body.editing .link-row { cursor: grab; }
.link-drag-handle { display: inline-block; color: #555; cursor: grab; user-select: none; letter-spacing: -2px; margin-right: 6px; vertical-align: middle; }
body.editing .category-title-row.dragging-row, body.editing .link-row.dragging-row { opacity: .45; }
body.editing .category-title-row.drag-over-row, body.editing .link-row.drag-over-row { background: rgba(0,255,255,.055); }
.icon-button {
    display: none;
    vertical-align: middle;
    border: 0;
    background: transparent;
    color: #0ff;
    cursor: pointer;
    font-family: Arial;
    font-size: 13px;
    line-height: 100%;
    padding: 0 2px;
    margin-left: 3px;
}
body.editing .icon-button { display: inline-block; }
.icon-button:hover { color: #cccccc; }
.menu-separator { color: #555; }

.card {
    width: 460px;
    max-width: calc(100vw - 30px);
    margin: 26px auto;
    border: 1px solid #555;
    background: #252525;
    color: #eee;
    padding: 18px;
    text-align: left;
}
.card h1 { text-align: center; }
form.card-form { display: grid; gap: 10px; }
form { margin: 0; }
label { font-weight: 700; }
.input, input, select, textarea {
    border: 1px solid #777;
    background: #fff;
    color: #222222;
    padding: 3px 5px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
}
.input:focus, input:focus, select:focus, textarea:focus,
.input:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: none !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    border-color: #777;
}
.button, .plain-button {
    border: 1px solid #777;
    background: #f2f2f2;
    color: #222222;
    cursor: pointer;
    font-family: Arial;
    font-size: 14px;
    padding: 2px 8px;
    text-decoration: none;
}
.button.small { font-size: 12px; padding: 2px 6px; }
.button.primary, .primary-dialog-button {
    background: transparent;
    color: #0ff;
    border-color: rgba(0,255,255,.55);
    text-shadow: 0 0 7px rgba(0,255,255,.28);
}
.button.primary:hover, .primary-dialog-button:hover {
    background: #2b2b2b;
    color: #0ff;
    border-color: #0ff;
    text-shadow: 0 0 12px rgba(0,255,255,.48);
}
.done-dialog-button {
    background: transparent;
    color: rgba(105,225,155,.88);
    border-color: rgba(105,225,155,.42);
}
.done-dialog-button:hover {
    background: rgba(70,190,120,.08);
    color: #8ff0b5;
    border-color: rgba(105,225,155,.75);
    box-shadow: 0 0 10px rgba(70,210,125,.14);
}
.cancelled-dialog-button {
    background: transparent;
    color: rgba(205,205,205,.82);
    border-color: rgba(205,205,205,.30);
}
.cancelled-dialog-button:hover {
    background: rgba(205,205,205,.05);
    color: #dddddd;
    border-color: rgba(205,205,205,.58);
    box-shadow: 0 0 9px rgba(205,205,205,.10);
}
.delete-dialog-delete-button {
    background: transparent;
    color: rgba(255,115,115,.82);
    border-color: rgba(255,90,90,.38);
}
.delete-dialog-delete-button:hover {
    background: rgba(210,55,55,.07);
    color: #ff8a8a;
    border-color: rgba(255,90,90,.70);
    box-shadow: 0 0 10px rgba(255,60,60,.12);
}
.delete-task-actions { justify-content: center; }
.danger-button { border-color: #8a3b3b; color: #220000; }
.profile-list { display: grid; grid-template-columns: 110px 1fr; gap: 6px 12px; }
.profile-list dt { color: #0ff; }
.profile-list dd { margin: 0; color: #cccccc; }
.editable-profile-list dd { min-height: 24px; }
.profile-edit-button { display: inline-block; margin-left: 5px; }
.inline-profile-form { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.inline-profile-form[hidden] { display: none !important; }
.profile-inline-input { width: 210px; max-width: 100%; }
.profile-actions { margin-top: 16px; text-align: center; }

.table-filter-button {
    border: 0;
    background: transparent;
    color: #0ff;
    cursor: pointer;
    font-family: Arial;
    font-size: 14px;
    padding: 0;
    text-shadow: 0 0 6px rgba(0,255,255,.18);
}
.table-filter-button:hover { text-shadow: 0 0 11px rgba(0,255,255,.55); }
.todo-color-filter-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 2px 0 10px;
    color: #cccccc;
    font-family: Arial;
    font-size: 13px;
}
.todo-filter-label { color: #777; }
.todo-color-filter-buttons { display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.todo-filter-panel {
    border: 1px solid rgba(0,255,255,.14);
    background: rgba(255,255,255,.018);
    color: #cccccc;
    margin: 0 auto 8px;
    padding: 8px 10px;
    text-align: center;
    font-family: Arial;
    font-size: 13px;
}
.todo-filter-panel[hidden] { display: none !important; }
.todo-filter-choice {
    display: inline-block;
    margin: 2px 10px 2px 0;
    color: #cccccc;
    font-weight: normal;
}

/* Tri-state List filter: neutral -> blue check/include -> red cross/exclude. */
.todo-list-tristate-choice {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 1px 2px;
    font: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    vertical-align: middle;
}
.todo-list-tristate-marker {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #666;
    border-radius: 2px;
    color: transparent;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    background: rgba(255,255,255,.015);
}
.todo-list-tristate-choice.include .todo-list-tristate-marker {
    color: #4aa3ff;
    border-color: rgba(74,163,255,.75);
    background: rgba(74,163,255,.08);
}
.todo-list-tristate-choice.exclude .todo-list-tristate-marker {
    color: #ff6262;
    border-color: rgba(255,98,98,.72);
    background: rgba(255,98,98,.07);
}
.todo-list-tristate-choice:hover .todo-list-tristate-label,
.todo-list-tristate-choice:focus-visible .todo-list-tristate-label {
    color: #eeeeee;
}
.todo-list-tristate-choice:focus-visible {
    outline: 1px solid rgba(0,255,255,.3);
    outline-offset: 2px;
}
.color-heading, .task-color-cell { width: 48px; text-align: center; }
.task-color-picker { position: relative; display: inline-block; line-height: 1; }
.color-swatch {
    display: inline-block;
    width: 13px;
    height: 13px;
    border: 1px solid #777;
    background: #f2f2f2;
    cursor: pointer;
    padding: 0;
    margin: 0 2px;
    vertical-align: middle;
    box-shadow: 0 0 4px rgba(0,0,0,.35);
}
.color-swatch.active { outline: 1px solid #0ff; box-shadow: 0 0 9px rgba(0,255,255,.42); }
.color-swatch[data-color="red"] { background: #ff4b4b; }
.color-swatch[data-color="yellow"] { background: #ffd84d; }
.color-swatch[data-color="green"] { background: #42d66e; }
.color-swatch[data-color="blue"] { background: #4aa3ff; }
.color-swatch[data-color="purple"] { background: #b77cff; }
.color-swatch[data-color="white"] { background: #f2f2f2; }
.color-swatch[data-color="orange"] { background: #ff9a35; }
.task-color-palette {
    position: absolute;
    z-index: 30;
    top: 18px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    gap: 4px;
    padding: 5px;
    border: 1px solid rgba(0,255,255,.18);
    background: #202020;
    box-shadow: 0 10px 26px rgba(0,0,0,.45), 0 0 16px rgba(0,255,255,.10);
}
.task-color-palette[hidden] { display: none !important; }


table.user-table { border-collapse: collapse; width: 100%; margin-top: 14px; }
table.user-table th, table.user-table td {
    border: 1px solid #555;
    padding: 6px;
    text-align: left;
    vertical-align: top;
}
table.user-table th { background: #303030; }

.save-dialog {
    border: 1px solid #555;
    background: #252525;
    color: #eee;
    width: 380px;
    max-width: calc(100vw - 30px);
    padding: 0;
}
.save-dialog::backdrop { background: rgba(0,0,0,.65); }
.save-form {
    padding: 18px;
    text-align: left;
    display: grid;
    gap: 8px;
}
.save-form h1 { text-align: center; margin-top: 0; }
.save-form p { font-size: 13px; color: #ddd; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; }
.dialog-message { min-height: 18px; color: #ff9d9d; }
.muted-text {
    color: #cccccc;
    font-family: Arial;
    font-size: 14px;
    line-height: 150%;
}

.memor-panel {
    width: 760px;
    max-width: calc(100vw - 30px);
    margin: 14px auto 60px auto;
    border: 0;
    background: transparent;
    padding: 0;
    text-align: left;
}
.minimal-memor-panel { margin-top: 12px; }
.memor-input {
    border: 1px solid #777;
    background: #fff;
    color: #222222;
    padding: 3px 5px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    outline: none;
    box-shadow: none;
}
.memor-input:focus {
    outline: none;
    box-shadow: none;
    border-color: #777;
}
.table-input { width: 100%; min-width: 90px; }

.category-autocomplete-wrap {
    position: relative;
    display: block;
    z-index: 1;
}
.category-autocomplete-wrap.suggestion-open,
.category-suggestion-wrap.suggestion-open,
.task-edit-category-wrap.suggestion-open {
    z-index: 1400;
}
.new-memory-row:focus-within,
.task-row-editing {
    position: relative;
    z-index: 1300;
}
.new-memory-row:focus-within td:first-child,
.task-row-editing td:first-child {
    position: relative;
    z-index: 1400;
}
.category-suggestion-list {
    position: absolute;
    z-index: 1200;
    left: 0;
    right: auto;
    top: calc(100% + 4px);
    bottom: auto;
    width: 100%;
    max-height: 170px;
    overflow-y: auto;
    background: #202020;
    border: 1px solid rgba(0,255,255,.28);
    box-shadow: 0 10px 26px rgba(0,0,0,.55), 0 0 14px rgba(0,255,255,.12);
    padding: 3px 0;
}
.category-suggestion-list[hidden] { display: none !important; }
.category-suggestion-option {
    display: block;
    width: 100%;
    border: 0;
    background: transparent;
    color: #cccccc;
    cursor: pointer;
    font-family: Arial;
    font-size: 14px;
    line-height: 150%;
    padding: 3px 7px;
    text-align: left;
}

.todo-sort-header {
    border: 0;
    background: transparent;
    color: #0ff;
    padding: 0;
    margin: 0;
    font: inherit;
    cursor: pointer;
    text-shadow: 0 0 5px rgba(0,255,255,.25);
}
.todo-sort-header:hover,
.todo-sort-header.sort-active {
    text-shadow: 0 0 9px rgba(0,255,255,.65);
}
.todo-sort-indicator {
    color: #ccc;
    font-size: 11px;
}

.category-suggestion-option:hover,
.category-suggestion-option.active {
    background: rgba(0,255,255,.22);
    color: #ffffff;
    text-shadow: 0 0 9px rgba(0,255,255,.45);
}
.minimal-input { border-color: #555; }
.memor-table-wrap { overflow-x: auto; }
table.memor-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0;
}
table.memor-table th,
table.memor-table td {
    border: 0;
    border-bottom: 1px solid #333;
    padding: 5px 6px;
    vertical-align: middle;
}
table.memor-table th {
    color: #0ff;
    background: transparent;
    font-family: Arial;
    font-size: 14px;
    font-weight: normal;
    cursor: pointer;
    white-space: nowrap;
    text-shadow: 0 0 6px rgba(0,255,255,.18);
}
table.memor-table td {
    color: #cccccc;
    font-family: Arial;
    font-size: 14px;
}
.drag-heading, .drag-cell { width: 34px; text-align: center; color: #555; }
.action-heading { width: 54px; }
.drag-cell { cursor: grab; user-select: none; letter-spacing: -2px; }
.new-memory-row td { border-bottom-color: #444; }
.dragging-row { opacity: .45; }
.drag-over-row { background: rgba(0,255,255,.055); }
.mini-link-button {
    border: 0;
    background: transparent;
    color: #0ff;
    cursor: pointer;
    font-family: Arial;
    font-size: 13px;
    padding: 1px 2px;
    text-decoration: none;
    text-shadow: 0 0 6px rgba(0,255,255,.18);
}
.mini-link-button:hover {
    text-shadow: 0 0 9px rgba(0,255,255,.45);
}
.memory-save-row-button { font-size: 14px; }
.memory-login-save-row td {
    border-bottom: 0;
    padding-top: 18px;
    text-align: center;
}
.memory-login-save-button {
    border: 0;
    background: transparent;
    color: #0ff;
    cursor: pointer;
    font-family: Arial;
    font-size: 14px;
    padding: 4px 8px;
    text-shadow: 0 0 6px rgba(0,255,255,.22);
}
.memory-login-save-button:hover {
    text-shadow: 0 0 11px rgba(0,255,255,.55);
}
.danger-mini {
    color: #ff8a8a;
    text-decoration: none;
    font-size: 18px;
    line-height: 1;
}
.minimal-delete { color: #777; }
.minimal-delete:hover { color: #ff8a8a; }
.memor-status,
.memor-status-line {
    min-height: 20px;
    margin-top: 8px;
    text-align: center;
    color: #cccccc;
    font-family: Arial;
    font-size: 13px;
}
.memor-status-link {
    border: 0;
    background: transparent;
    color: #0ff;
    cursor: pointer;
    font-family: Arial;
    font-size: 13px;
    padding: 0;
    text-decoration: underline;
    text-shadow: 0 0 6px rgba(0,255,255,.22);
}
.memor-status-link:hover { text-shadow: 0 0 11px rgba(0,255,255,.55); }

.admin-panel {
    width: 760px;
    max-width: calc(100vw - 30px);
    margin: 0 auto 44px;
    text-align: left;
}
.admin-section {
    margin: 28px 0;
    padding-top: 18px;
    border-top: 1px solid rgba(0,255,255,.12);
}
.admin-section h2 {
    margin: 0 0 16px;
    color: #0ff;
    font-size: 16px;
    font-weight: normal;
    text-align: center;
    text-shadow: 0 0 7px rgba(0,255,255,.25);
}
.admin-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
    gap: 12px;
}
.admin-card, .admin-card:hover, .admin-card:visited {
    display: block;
    min-height: 74px;
    border: 1px solid rgba(0,255,255,.18);
    background: rgba(255,255,255,.018);
    padding: 12px 10px;
    color: #cccccc;
    text-align: center;
    text-decoration: none;
    box-shadow: 0 0 18px rgba(0,255,255,.035);
}
.admin-card:hover { box-shadow: 0 0 22px rgba(0,255,255,.12); }
.admin-number {
    display: block;
    color: #0ff;
    font-size: 24px;
    line-height: 1.1;
    margin-bottom: 6px;
}
.admin-label {
    display: block;
    color: #cccccc;
    font-size: 13px;
    line-height: 1.25;
}
.admin-copy-block,
.admin-actions,
.clean-admin-actions,
.admin-backup-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    text-align: center;
}
.admin-copy-block {
    flex-direction: column;
    gap: 6px;
}
.admin-main-link {
    font-size: 15px;
}
.admin-muted,
.admin-note,
.admin-backup-copy {
    color: #888;
    font-size: 13px;
    line-height: 1.45;
}
.admin-backup-section {
    display: grid;
    gap: 18px;
}
.admin-backup-box {
    border: 1px solid rgba(0,255,255,.14);
    background: rgba(255,255,255,.015);
    box-shadow: 0 0 18px rgba(0,255,255,.025);
    padding: 18px 16px;
    text-align: center;
}
.admin-backup-box.danger-zone {
    border-color: rgba(0,255,255,.2);
}
.admin-backup-title {
    color: #0ff;
    font-size: 15px;
    margin-bottom: 7px;
}
.admin-backup-copy {
    max-width: 540px;
    margin: 0 auto 14px;
}
.admin-backup-action {
    margin-top: 10px;
}
.admin-import-form {
    margin: 14px auto 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.admin-import-form input[type="file"] {
    width: auto;
    max-width: 280px;
    color: #cccccc;
}
.file-pick-label {
    color: #cccccc;
    font-size: 13px;
}
@media (max-width: 760px) {
    .upunkt-header {
        padding-top: 14px;
        padding-bottom: 8px;
    }
    
    
    
    
    
    
    
    
    
    
    
    
    .google-search-row input[type="text"] { width: calc(100vw - 115px); }
    .memor-panel { padding: 8px; }
}


/* ToDoList compact grid layout v049 */
.todo-color-filter-row { display: none !important; }
.memor-table-wrap { overflow-x: auto; overflow-y: visible; }
.todolist-grid-table { table-layout: fixed; width: 1040px; min-width: 100%; border-collapse: collapse; }
.todolist-grid-table col.todo-col-category { width: 250px; }
.todolist-grid-table col.todo-col-task { width: 380px; }
.todolist-grid-table col.todo-col-status-text { width: 220px; }
.todolist-grid-table col.todo-col-color { width: 52px; }
.todolist-grid-table col.todo-col-status { width: 58px; }
.todolist-grid-table col.todo-col-select { width: 44px; }
.todolist-grid-table th { position: relative; }
.todo-col-resizer {
    position: absolute;
    top: 5px;
    right: -4px;
    bottom: 5px;
    width: 9px;
    cursor: col-resize;
    z-index: 80;
    touch-action: none;
}
.todo-col-resizer-left {
    left: -4px;
    right: auto;
}
.todo-col-resizer-right {
    right: -4px;
}
.todo-col-resizer-outer::after {
    background: rgba(0,255,255,.44);
    box-shadow: 0 0 7px rgba(0,255,255,.26);
}
.todo-col-resizer::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 4px;
    width: 1px;
    background: rgba(0,255,255,.32);
    box-shadow: 0 0 6px rgba(0,255,255,.20);
}
.todo-col-resizer:hover::after,
.todo-col-resizer.active::after {
    width: 2px;
    background: rgba(0,255,255,.92);
    box-shadow: 0 0 12px rgba(0,255,255,.55);
}
body.todo-column-resizing, body.todo-column-resizing * { cursor: col-resize !important; user-select: none !important; }

 .todolist-grid-table th.todo-c-heading, .todolist-grid-table td.task-color-cell { text-align: center; }
 .todolist-grid-table th.todo-status-heading, .todolist-grid-table td.todo-status-cell { text-align: center; }
 .todolist-grid-table th.todo-b-heading, .todolist-grid-table td.todo-check-cell { text-align: center; }
.todolist-grid-table tbody tr[data-task-id] { cursor: grab; }
.todolist-grid-table tbody tr[data-task-id]:active { cursor: grabbing; }
.task-row-done td, .task-row-cancelled td { color: #777 !important; text-decoration: line-through; }
.task-row-done .task-color-cell, .task-row-done .todo-status-cell, .task-row-done .todo-check-cell,
.task-row-cancelled .task-color-cell, .task-row-cancelled .todo-status-cell, .task-row-cancelled .todo-check-cell { text-decoration: none; }
.editable-task-cell { cursor: text; }
.editable-task-cell:hover { color: inherit; text-shadow: none; }
.task-row-editing { cursor: default !important; }
.task-edit-input,
.task-edit-input:focus {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    outline: 0;
    background: transparent;
    color: inherit;
    box-shadow: none;
    font: inherit;
    line-height: inherit;
}
.category-suggestion-wrap,
.task-edit-category-wrap { position: relative; display: block; width: 100%; }
.task-row-editing { position: relative; z-index: 120; }
.task-row-editing .category-suggestion-list { z-index: 1200; min-width: 0; }
.category-change-message { color: #cccccc; line-height: 1.5; margin: 0 0 14px; }
.category-change-actions { display: grid; gap: 8px; }
.category-change-actions .plain-button { width: 100%; text-align: center; }
.task-row-editing .green-check-button { opacity: .88; }

.todo-filter-panel.todo-color-filter-panel { text-align: right; padding-right: 70px; }
.task-color-picker { position: relative; display: inline-block; line-height: 1; overflow: visible; }
.task-color-palette {
    position: absolute;
    z-index: 200;
    top: 18px;
    right: 0;
    left: auto;
    transform: none;
    display: inline-flex;
    gap: 4px;
    padding: 5px;
    border: 1px solid rgba(0,255,255,.18);
    background: #202020;
    box-shadow: 0 10px 26px rgba(0,0,0,.45), 0 0 16px rgba(0,255,255,.10);
}
.memor-table-wrap { overflow-x: visible; overflow-y: visible; position: relative; }
table.memor-table { overflow: visible; }
table.memor-table th { cursor: default; }
table.memor-table td { overflow: visible; }
.todo-check-cell input[type="checkbox"] { width: 14px; height: 14px; accent-color: #0ff; cursor: pointer; }
.new-memory-row .todo-check-cell input[type="checkbox"] { opacity: .85; }
.new-memory-row .todo-check-cell input[type="checkbox"]:indeterminate { accent-color: #0ff; }
@media(max-width: 700px) {
    .todo-filter-panel.todo-color-filter-panel { text-align: center; padding-right: 10px; }
}


/* ToDoList dropdowns and action icons v036 */
.todo-filter-panel {
    position: fixed;
    z-index: 600;
    min-width: 220px;
    max-width: min(320px, calc(100vw - 16px));
    padding: 10px;
    border: 1px solid rgba(0,255,255,.22);
    background: #202020;
    box-shadow: 0 14px 30px rgba(0,0,0,.55), 0 0 18px rgba(0,255,255,.10);
    text-align: left;
}
.todo-task-filter-panel { display: grid; gap: 7px; }
.todo-filter-label { color: #0ff; font-size: 12px; font-weight: normal; }
.todo-filter-select { color: #222222; background: #eeeeee; height: 25px; }
.todo-color-filter-panel, .todo-status-filter-panel { padding: 9px; }
.todo-color-filter-buttons { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.todo-status-filter-buttons { display: grid; gap: 5px; }
.todo-bulk-action-panel { display: grid; gap: 7px; min-width: 245px; }
.todo-bulk-action-panel .mini-link-button { text-align: left; }
.todo-import-textfile-panel { display: grid; gap: 6px; padding: 8px 0 0 0; border-top: 1px solid rgba(0,255,255,.14); }
.todo-import-textfile-panel[hidden] { display: none !important; }
.import-textfile-input { max-width: 230px; color: #ccc; font-size: 12px; }
.import-textfile-status { max-width: 230px; min-height: 16px; }
.circle-icon-button {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    line-height: 1;
    font-family: Arial, sans-serif;
    background: transparent;
    cursor: pointer;
    padding: 0;
    vertical-align: middle;
}
.green-check-button {
    border: 1px solid rgba(0,255,136,.42);
    color: rgba(0,255,136,.70);
    box-shadow: 0 0 5px rgba(0,255,136,.12);
}
.green-check-button:hover { color: #00ff88; border-color: rgba(0,255,136,.75); box-shadow: 0 0 10px rgba(0,255,136,.28); }
.red-delete-button {
    border: 1px solid rgba(255,85,85,.38);
    color: rgba(255,85,85,.66);
    box-shadow: 0 0 5px rgba(255,60,60,.11);
}
.red-delete-button:hover { color: #ff6666; border-color: rgba(255,85,85,.72); box-shadow: 0 0 10px rgba(255,60,60,.28); }
.question-icon-button {
    width: 18px;
    height: 18px;
    border: 1px solid rgba(0,255,255,.75);
    color: #0ff;
    box-shadow: 0 0 10px rgba(0,255,255,.18);
}
.question-icon-button:hover { box-shadow: 0 0 16px rgba(0,255,255,.40); }
.todolist-grid-table th.todo-b-heading { text-align: center; }
.todolist-grid-table td.todo-check-cell input[type="checkbox"] { width: 14px; height: 14px; accent-color: #0ff; cursor: pointer; }
.task-color-palette { position: fixed; z-index: 650; right: auto; left: auto; top: auto; transform: none; }
.filter-header-wrap { display: inline-flex; align-items: center; justify-content: center; gap: 5px; white-space: nowrap; }
.compact-filter-header { min-width: 34px; }
.filter-header-button, .filter-icon-button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
.filter-icon-button { width: 17px; height: 17px; padding: 0; }
.color-filter-header-button { min-width: 20px; width: 20px; height: 20px; padding: 0; }
.color-filter-glyph {
    width: 15px;
    height: 15px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 1px;
    padding: 2px;
    border: 1px solid rgba(0,255,255,.58);
    border-radius: 3px;
    background: rgba(0,0,0,.18);
    box-shadow: 0 0 5px rgba(0,255,255,.10);
    opacity: .86;
    transition: border-color .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.color-filter-cell {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 1px;
    opacity: .88;
}
.color-filter-red { background: #e05a5a; }
.color-filter-yellow { background: #e6d35a; }
.color-filter-green { background: #53c878; }
.color-filter-blue { background: #5a8fe6; }
.color-filter-glyph.filter-active {
    border-color: #0ff;
    box-shadow: 0 0 10px rgba(0,255,255,.30);
    opacity: 1;
}
.table-filter-button:hover .color-filter-glyph {
    border-color: #0ff;
    box-shadow: 0 0 10px rgba(0,255,255,.26);
    opacity: 1;
}
.filter-glyph {
    position: relative;
    width: 12px;
    height: 12px;
    display: inline-block;
    opacity: .82;
    vertical-align: middle;
}
.filter-glyph::before {
    content: "";
    position: absolute;
    left: 1px;
    top: 2px;
    width: 10px;
    height: 8px;
    background: rgba(0,255,255,.70);
    clip-path: polygon(0 0, 100% 0, 62% 45%, 62% 100%, 38% 100%, 38% 45%);
    box-shadow: 0 0 6px rgba(0,255,255,.14);
}
.filter-glyph.filter-active::before {
    background: #0ff;
    box-shadow: 0 0 10px rgba(0,255,255,.34);
}
.table-filter-button:hover .filter-glyph::before { background: #0ff; box-shadow: 0 0 10px rgba(0,255,255,.32); }
.filter-clear-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border: 1px solid rgba(255,85,85,.36);
    border-radius: 50%;
    background: transparent;
    color: rgba(255,85,85,.72);
    cursor: pointer;
    font-family: Arial;
    font-size: 11px;
    line-height: 1;
    padding: 0;
    box-shadow: 0 0 5px rgba(255,60,60,.10);
}
.filter-clear-button:hover {
    color: #ff7777;
    border-color: rgba(255,85,85,.68);
    box-shadow: 0 0 9px rgba(255,60,60,.20);
}
.filter-clear-button[hidden] { display: none !important; }
.status-heading-symbol {
    display: inline-flex;
    width: 18px;
    height: 18px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(0,255,255,.30);
    color: rgba(0,255,255,.62);
    font-size: 11px;
    line-height: 1;
    box-shadow: 0 0 6px rgba(0,255,255,.10);
}
.status-filter-header-button { width: 20px; height: 20px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.status-heading-symbol.filter-active { border-color: rgba(0,255,255,.78); color: #0ff; box-shadow: 0 0 12px rgba(0,255,255,.28); }
.status-filter-option {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #cccccc;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    padding: 4px 5px;
    text-align: left;
    font-size: 13px;
}
.status-filter-option.active { border-color: rgba(0,255,255,.34); background: rgba(0,255,255,.045); color: #0ff; }
.status-filter-option:hover { border-color: rgba(0,255,255,.24); color: #0ff; }
.task-status-picker { position: relative; display: inline-block; line-height: 1; overflow: visible; }
.status-circle {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    line-height: 1;
    font-family: Arial, sans-serif;
    background: transparent;
    cursor: pointer;
    padding: 0;
    vertical-align: middle;
    border: 1px solid rgba(204,204,204,.28);
    color: rgba(204,204,204,.64);
    box-shadow: 0 0 4px rgba(204,204,204,.08);
}
.status-circle.status-unspecified, .status-circle.status-open { border-color: rgba(204,204,204,.22); color: transparent; }
.status-circle.status-today { border-color: rgba(0,255,255,.42); color: rgba(0,255,255,.72); font-size: 10px; }
.status-circle.status-soon { border-color: rgba(255,210,85,.40); color: rgba(255,210,85,.76); font-size: 9px; }
.status-circle.status-later { border-color: rgba(190,120,255,.40); color: rgba(210,155,255,.76); font-size: 8px; }
.status-circle.status-done { border-color: rgba(0,255,136,.42); color: rgba(0,255,136,.72); }
.status-circle.status-cancelled { border-color: rgba(190,190,190,.34); color: rgba(190,190,190,.66); }
.status-circle:hover { box-shadow: 0 0 10px rgba(0,255,255,.18); opacity: 1; }
.task-status-palette {
    position: fixed;
    z-index: 650;
    display: grid;
    gap: 5px;
    min-width: 132px;
    padding: 7px;
    border: 1px solid rgba(0,255,255,.18);
    background: #202020;
    box-shadow: 0 10px 26px rgba(0,0,0,.45), 0 0 16px rgba(0,255,255,.10);
}
.task-status-palette[hidden], .task-color-palette[hidden], .todo-filter-panel[hidden] { display: none !important; }
.status-option {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #cccccc;
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 4px 5px;
    text-align: left;
    font-size: 13px;
}
.status-option:hover, .status-option.active { color: #0ff; background: rgba(0,255,255,.06); }
.status-calendarize-option {
    margin-top: 3px;
    padding-top: 7px;
    border-top: 1px solid rgba(0,255,255,.14);
}
.status-calendarize-icon {
    display: inline-flex;
    width: 18px;
    height: 18px;
    align-items: center;
    justify-content: center;
    color: rgba(0,255,255,.72);
    font-size: 14px;
}
.status-delete-option {
    margin-top: 3px;
    padding-top: 7px;
    border-top: 1px solid rgba(255,110,110,.14);
}
.status-delete-option:hover { color: #ff9a9a; background: rgba(255,80,80,.06); }
.status-delete-icon {
    display: inline-flex;
    width: 18px;
    height: 18px;
    align-items: center;
    justify-content: center;
    color: rgba(255,130,130,.72);
    font-size: 14px;
}

.circle-icon-button.green-check-button, .circle-icon-button.red-delete-button { font-weight: normal; opacity: .72; }
.circle-icon-button.green-check-button:hover, .circle-icon-button.red-delete-button:hover { opacity: 1; }

/* Appointments — Upunkt visual language v073 */
.appointments-panel {
    width: 1080px;
    max-width: calc(100vw - 30px);
    margin: 12px auto 70px;
    color: #cccccc;
    font-family: Arial, sans-serif;
}
.appointments-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 22px;
    min-height: 30px;
    margin: 0 0 12px;
    padding: 0 2px 8px;
    border-bottom: 1px solid rgba(0,255,255,.10);
    flex-wrap: wrap;
}
.appointments-view-switch,
.appointments-calendar-nav {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.appointments-calendar-nav {
    margin-left: 10px;
}
.appointments-toolbar-divider {
    color: #555;
    font-size: 12px;
    user-select: none;
}
.appointments-add-button {
    width: 22px;
    height: 22px;
    border: 1px solid rgba(0,255,255,.26);
    border-radius: 50%;
    background: transparent;
    color: rgba(0,255,255,.72);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 0 1px;
    font-family: Arial, sans-serif;
    font-size: 17px;
    line-height: 1;
    text-shadow: 0 0 5px rgba(0,255,255,.16);
    box-shadow: 0 0 6px rgba(0,255,255,.04);
}
.appointments-add-button:hover,
.appointments-add-button:focus-visible {
    color: #0ff;
    border-color: rgba(0,255,255,.58);
    outline: 0;
    text-shadow: 0 0 9px rgba(0,255,255,.42);
    box-shadow: 0 0 10px rgba(0,255,255,.11);
}
.appointments-add-button[hidden] {
    display: none !important;
}
.appointments-search-input {
    width: 180px;
    height: 24px;
    margin-left: 2px;
    padding: 2px 5px 3px;
    border: 0;
    border-bottom: 1px solid rgba(0,255,255,.18);
    border-radius: 0;
    outline: 0;
    background: transparent;
    color: #cfd6d6;
    font-family: var(--upunkt-ui-font);
    font-size: 12px;
}
.appointments-search-input::placeholder { color: #666; }
.appointments-search-input:hover { border-bottom-color: rgba(0,255,255,.34); }
.appointments-search-input:focus {
    border-bottom-color: rgba(0,255,255,.62);
    box-shadow: 0 5px 10px -9px rgba(0,255,255,.75);
}
.appointments-search-input[hidden] { display: none !important; }
.appointments-sharing-button {
    border: 0;
    background: transparent;
    color: #888;
    cursor: pointer;
    font-family: var(--upunkt-ui-font);
    font-size: 12px;
    line-height: 1;
    padding: 4px 2px 3px;
    border-bottom: 1px solid transparent;
}
.appointments-sharing-button:hover,
.appointments-sharing-button:focus-visible,
.appointments-sharing-button.active {
    color: #0ff;
    border-bottom-color: rgba(0,255,255,.48);
    outline: 0;
    text-shadow: 0 0 8px rgba(0,255,255,.30);
}
.appointments-sharing-panel {
    width: min(700px, calc(100vw - 16px));
    max-width: calc(100vw - 16px);
    display: grid;
    gap: 9px;
    padding: 12px 14px 14px;
}
.appointments-sharing-title {
    color: #0ff;
    font-size: 12px;
    letter-spacing: .05em;
}
.appointments-sharing-add {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding-bottom: 7px;
    border-bottom: 1px solid rgba(0,255,255,.11);
}
.appointments-sharing-email {
    min-width: 0;
    height: 27px;
    border: 1px solid rgba(0,255,255,.16);
    background: #171717;
    color: #d2d8d8;
    padding: 3px 7px;
    font: inherit;
    outline: 0;
}
.appointments-sharing-email:focus { border-color: rgba(0,255,255,.48); }
.appointments-sharing-add-button { margin: 0; }
.appointments-sharing-hint {
    margin: 5px 0 2px;
    color: #686f6f;
    font-size: 10px;
    line-height: 1.35;
}
.appointments-sharing-message {
    min-height: 14px;
    color: #7eaaaa;
    font-size: 11px;
}
.appointments-sharing-message.error { color: #d77; }
.appointments-sharing-head,
.appointments-sharing-row {
    display: grid;
    grid-template-columns: minmax(150px, 1.45fr) minmax(125px, .9fr) minmax(125px, .9fr) 42px 22px;
    gap: 10px;
    align-items: center;
}
.appointments-sharing-head {
    color: #686f6f;
    font-size: 10px;
    letter-spacing: .04em;
    padding: 0 3px;
}
.appointments-sharing-rows {
    display: grid;
    gap: 2px;
    max-height: 290px;
    overflow-y: auto;
}
.appointments-sharing-row {
    padding: 7px 3px;
    border-top: 1px solid rgba(255,255,255,.035);
}
.appointments-sharing-remove {
    width: 18px;
    height: 18px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #666d6d;
    font: 14px/18px var(--upunkt-ui-font);
    text-align: center;
    cursor: pointer;
    opacity: .72;
}
.appointments-sharing-remove:hover,
.appointments-sharing-remove:focus-visible {
    color: #c8cece;
    background: rgba(255,255,255,.05);
    opacity: 1;
    outline: 0;
}
.appointments-sharing-remove:disabled {
    opacity: .3;
    cursor: default;
}
.appointments-sharing-user {
    min-width: 0;
    display: grid;
    gap: 1px;
}
.appointments-sharing-user-name,
.appointments-sharing-user-email {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.appointments-sharing-user-name { color: #c6cccc; font-size: 12px; }
.appointments-sharing-user-email { color: #707777; font-size: 10px; }
.calendar-share-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #aeb4b4;
    font-size: 11px;
    cursor: pointer;
    white-space: nowrap;
}
.calendar-share-toggle input { width: 14px; height: 14px; margin: 0; accent-color: #0ff; }
.calendar-share-toggle.is-disabled {
    color: #555b5b;
    cursor: default;
}
.calendar-share-toggle.is-disabled input { opacity: .38; }
.calendar-share-toggle.is-disabled:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    z-index: 1000;
    left: auto;
    right: calc(100% + 8px);
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    width: max-content;
    max-width: 300px;
    padding: 6px 8px;
    border: 1px solid rgba(0,255,255,.14);
    background: #181818;
    color: #b9bebe;
    box-shadow: 0 8px 20px rgba(0,0,0,.45);
    font-size: 11px;
    white-space: normal;
    pointer-events: none;
}
.calendar-share-color {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.calendar-share-color input[type="color"] {
    width: 28px;
    height: 20px;
    padding: 0;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
}
.calendar-share-color input[type="color"]::-webkit-color-swatch-wrapper { padding: 2px; }
.calendar-share-color input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 2px; }
.calendar-share-color input[type="color"]::-moz-color-swatch { border: 0; border-radius: 2px; }
.appointments-sharing-empty { color: #666; font-size: 11px; padding: 7px 3px; }
.appointment-own-row td {
    background: color-mix(in srgb, var(--own-calendar-color, #5f9ea0) 4%, transparent);
}
.appointment-own-row td:first-child {
    box-shadow: inset 2px 0 0 var(--own-calendar-color, #5f9ea0);
}
.appointment-shared-row td {
    background: color-mix(in srgb, var(--shared-calendar-color, #5f9ea0) 5%, transparent);
}
.appointment-shared-row td:first-child {
    box-shadow: inset 2px 0 0 var(--shared-calendar-color, #5f9ea0);
}
.appointment-shared-owner-badge {
    --badge-color: var(--shared-calendar-color, #5f9ea0);
    width: 22px;
    height: 22px;
    border: 1px solid color-mix(in srgb, var(--badge-color) 76%, #ffffff 8%);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: color-mix(in srgb, var(--badge-color) 68%, #ffffff 32%);
    background: color-mix(in srgb, var(--badge-color) 13%, transparent);
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    cursor: help;
}
.appointment-calendar-event-own {
    border-left-color: var(--own-calendar-color, #5f9ea0) !important;
    color: color-mix(in srgb, var(--own-calendar-color, #5f9ea0) 58%, #d7dddd 42%) !important;
    background: color-mix(in srgb, var(--own-calendar-color, #5f9ea0) 8%, transparent) !important;
}
.appointment-calendar-event-shared {
    border-left-color: var(--shared-calendar-color, #5f9ea0) !important;
    color: color-mix(in srgb, var(--shared-calendar-color, #5f9ea0) 58%, #d7dddd 42%) !important;
    background: color-mix(in srgb, var(--shared-calendar-color, #5f9ea0) 9%, transparent) !important;
}
@media (max-width: 650px) {
    .appointments-sharing-head { display: none; }
    .appointments-sharing-row { grid-template-columns: 1fr; gap: 5px; }
    .appointments-sharing-panel { width: calc(100vw - 16px); }
}
.appointments-view-button,
.appointments-nav-button {
    border: 0;
    background: transparent;
    color: #888;
    cursor: pointer;
    font-family: Arial, sans-serif;
    font-size: 13px;
    line-height: 1;
    padding: 3px 2px;
    text-shadow: 0 0 5px rgba(0,255,255,.06);
}
.appointments-view-button:hover,
.appointments-view-button.active,
.appointments-nav-button:hover {
    color: #0ff;
    text-shadow: 0 0 9px rgba(0,255,255,.38);
}
.appointments-view-button.active {
    border-bottom: 1px solid rgba(0,255,255,.55);
}
.appointments-view-button.list-filter-active {
    color: #ffd45c;
    border-bottom-color: rgba(255,212,92,.60);
    text-shadow: 0 0 8px rgba(255,212,92,.32);
}
.appointments-view-button.list-filter-active:hover,
.appointments-view-button.list-filter-active:focus-visible {
    color: #ffe27f;
    text-shadow: 0 0 10px rgba(255,212,92,.42);
}
.appointments-list-filter-panel {
    min-width: 238px;
}
.appointments-list-filter-options {
    display: grid;
    gap: 6px;
    margin-bottom: 7px;
}
.appointments-filter-section-title {
    margin: 0 0 6px;
    color: #899393;
    font-family: var(--upunkt-display-font);
    font-size: 10px;
    letter-spacing: .07em;
    text-transform: uppercase;
}
.appointments-category-filter-options {
    display: grid;
    gap: 5px;
    max-height: 190px;
    overflow-y: auto;
    margin-bottom: 4px;
}
.appointments-list-filter-choice {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    cursor: pointer;
}
.appointments-list-filter-choice input {
    width: 14px;
    height: 14px;
    margin: 0;
    accent-color: #0ff;
}
.appointments-calendar-mode-button {
    font-size: 12px;
}
.appointments-nav-button {
    min-width: 24px;
    height: 20px;
    padding: 0 2px 1px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    letter-spacing: -1px;
}
.appointments-nav-button.year-nav {
    min-width: 34px;
}
.appointments-nav-button.month-nav {
    min-width: 28px;
}
.appointments-nav-button[hidden] {
    display: none !important;
}
.appointments-month-view-link {
    border: 0;
    border-bottom: 1px solid rgba(0,255,255,.18);
    background: transparent;
    color: #888;
    cursor: pointer;
    font-family: Arial, sans-serif;
    font-size: 11px;
    line-height: 1;
    margin-left: 8px;
    padding: 3px 1px 2px;
    text-shadow: 0 0 5px rgba(0,255,255,.06);
}
.appointments-month-view-link:hover,
.appointments-month-view-link:focus,
.appointments-month-view-link:focus-visible {
    color: #0ff;
    outline: 0;
    border-bottom-color: rgba(0,255,255,.60);
    text-shadow: 0 0 9px rgba(0,255,255,.38);
}
.appointments-month-label {
    min-width: 118px;
    color: #0ff;
    font-size: 13px;
    text-align: center;
    text-shadow: 0 0 6px rgba(0,255,255,.18);
}
.appointments-calendar-nav[hidden],
.appointments-list-panel[hidden],
.appointments-calendar-panel[hidden] {
    display: none !important;
}
.appointment-entry-shell {
    width: 100%;
    max-width: 100%;
    margin-bottom: 10px;
    border-bottom: 1px solid #333;
    overflow-x: hidden;
    box-sizing: border-box;
}
.appointment-entry-head,
.appointment-entry-grid {
    display: grid;
    grid-template-columns: minmax(104px,.72fr) minmax(210px,1.25fr) minmax(92px,.55fr) minmax(124px,.78fr) minmax(200px,1.35fr) 34px;
    gap: 8px;
    align-items: center;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}
.appointment-entry-head {
    min-height: 25px;
    color: #0ff;
    font-size: 13px;
    text-shadow: 0 0 6px rgba(0,255,255,.16);
}
.appointment-entry-grid {
    padding: 1px 0 7px;
}
.appointment-datetime-pair {
    display: grid;
    grid-template-columns: minmax(118px, 1fr) 58px;
    gap: 6px;
    align-items: center;
    min-width: 0;
}
.appointment-time-input {
    text-align: center;
    letter-spacing: .02em;
}
.appointment-duration-parts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    align-items: end;
}
.appointment-duration-part {
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 2px;
    min-width: 0;
    margin: 0;
}
.appointment-duration-part > span {
    color: #777;
    font-size: 9px;
    line-height: 1;
    text-align: center;
    letter-spacing: .08em;
}
.appointment-duration-input {
    text-align: center;
    padding-left: 1px;
    padding-right: 1px;
}
.appointment-input,
.appointment-input:focus,
.appointment-input:focus-visible {
    width: 100%;
    min-width: 0;
    height: 28px;
    border: 0;
    border-bottom: 1px solid #555;
    border-radius: 0;
    outline: 0 !important;
    background: transparent;
    color: #cccccc;
    padding: 3px 3px 2px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 13px;
    box-shadow: none !important;
    color-scheme: dark;
}
.appointment-input::placeholder {
    color: #666;
    opacity: 1;
}
.appointment-input:hover {
    border-bottom-color: rgba(0,255,255,.30);
}
.appointment-input:focus {
    color: #eeeeee;
    border-bottom-color: rgba(0,255,255,.62);
    box-shadow: 0 5px 10px -9px rgba(0,255,255,.9) !important;
}
.appointment-row-save,
.appointment-row-delete {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: auto;
    padding: 0 0 1px;
    background: transparent;
    cursor: pointer;
    font-family: Arial, sans-serif;
    font-size: 12px;
    line-height: 1;
    opacity: .68;
}
.appointment-row-save {
    border: 1px solid rgba(0,255,136,.34);
    color: rgba(0,255,136,.62);
    box-shadow: 0 0 5px rgba(0,255,136,.06);
}
.appointment-row-save:hover,
.appointment-row-save.editing {
    opacity: 1;
    color: rgba(100,255,175,.92);
    border-color: rgba(0,255,136,.62);
    box-shadow: 0 0 9px rgba(0,255,136,.18);
}
.appointment-row-delete {
    border: 1px solid rgba(255,90,90,.28);
    color: rgba(255,105,105,.58);
    font-size: 14px;
}
.appointment-row-delete:hover {
    opacity: 1;
    color: #ff8a8a;
    border-color: rgba(255,90,90,.62);
    box-shadow: 0 0 9px rgba(255,70,70,.14);
}
.appointments-list-panel {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
}
.appointments-list-panel,
.appointments-list-panel * {
    min-width: 0;
}
.appointments-list-panel .appointments-table {
    margin-left: 0;
    margin-right: 0;
}
.appointments-table {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    border-collapse: separate;
    border-spacing: 0 4px;
    table-layout: fixed;
}
.appointments-table th,
.appointments-table td {
    border: 0;
    padding: 6px 7px;
    text-align: left;
    vertical-align: middle;
    color: #cccccc;
    font-family: Arial, sans-serif;
    font-size: 13px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.appointments-table tbody tr.appointment-list-row td {
    background: rgba(255,255,255,.012);
    border-top: 1px solid rgba(0,255,255,.13);
    border-bottom: 1px solid rgba(0,255,255,.13);
}
.appointments-table tbody tr.appointment-list-row td:first-child {
    border-left: 1px solid rgba(0,255,255,.13);
    border-radius: 7px 0 0 7px;
}
.appointments-table tbody tr.appointment-list-row td:last-child {
    border-right: 1px solid rgba(0,255,255,.13);
    border-radius: 0 7px 7px 0;
}
.appointments-table th {
    color: #0ff;
    font-weight: normal;
    white-space: nowrap;
    text-shadow: 0 0 6px rgba(0,255,255,.16);
}
.appointments-table th:nth-child(1) { width: 112px; }
.appointments-table th:nth-child(2) { width: 96px; }
.appointments-table th:nth-child(3) { width: 100px; }
.appointments-table th:nth-child(4) { width: 108px; }
.appointments-table th:nth-child(5) { width: 108px; }
.appointments-table th:nth-child(7) { width: 126px; }
.appointments-table th:last-child { width: 38px; text-align: center; }
.appointments-table tbody tr.appointment-list-row {
    cursor: pointer;
}
.appointments-table tbody tr.appointment-list-row:hover td,
.appointments-table tbody tr.appointment-list-row:focus td,
.appointments-table tbody tr.appointment-list-row:focus-visible td {
    background: rgba(0,255,255,.038);
    border-top-color: rgba(0,255,255,.27);
    border-bottom-color: rgba(0,255,255,.27);
}
.appointments-table tbody tr.appointment-list-row:focus,
.appointments-table tbody tr.appointment-list-row:focus-visible {
    outline: 0;
}
.appointments-table tbody tr.appointment-list-row:hover .appointment-title-cell,
.appointments-table tbody tr.appointment-list-row:focus .appointment-title-cell {
    color: #0ff;
    text-shadow: 0 0 7px rgba(0,255,255,.22);
}
.appointment-action-cell {
    text-align: center !important;
}
.appointments-table td:nth-child(1),
.appointments-table td:nth-child(2),
.appointments-table td:nth-child(3),
.appointments-table td:nth-child(7) {
    color: #999;
}
.appointment-category-cell {
    color: #93a7a7 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.appointment-description-cell {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #aaa !important;
}
.appointment-title-button {
    width: 100%;
    border: 0;
    background: transparent;
    color: #cccccc;
    padding: 0;
    cursor: pointer;
    font: inherit;
    text-align: left;
}
.appointment-title-button:hover {
    color: #0ff;
    text-shadow: 0 0 7px rgba(0,255,255,.24);
}
.appointments-table tbody tr.appointment-list-row td::before {
    content: none !important;
    display: none !important;
}
.appointments-empty {
    height: 54px;
    color: #666 !important;
    text-align: center !important;
    font-style: italic;
}
.appointments-calendar-panel {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
    border-top: 1px solid rgba(0,255,255,.30);
    border-bottom: 1px solid rgba(0,255,255,.22);
    box-shadow: 0 0 14px rgba(0,255,255,.035);
}
.appointments-calendar-panel.week-view-scroll {
    overflow-x: hidden;
    overflow-y: visible;
    max-width: 100%;
}
.appointments-weekdays,
.appointments-calendar-grid {
    display: grid;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    grid-template-columns: clamp(22px,3.2vw,34px) repeat(7,minmax(0,1fr));
}
.appointments-weekdays {
    color: #0ff;
    font-size: 11px;
    text-align: center;
    text-shadow: 0 0 5px rgba(0,255,255,.14);
}
.appointments-weekdays span {
    padding: 7px 3px 6px;
    border-bottom: 1px solid rgba(0,255,255,.10);
}
.appointments-week-heading {
    border-right: 1px solid rgba(0,255,255,.26);
}
.appointment-calendar-day {
    min-width: 0;
    min-height: 88px;
    cursor: pointer;
    border-right: 1px solid rgba(0,255,255,.22);
    border-bottom: 1px solid rgba(0,255,255,.22);
    padding: 5px;
    overflow: hidden;
    background: rgba(0,255,255,.024);
    box-shadow: inset 0 0 0 1px rgba(0,255,255,.44), inset 0 0 12px rgba(0,255,255,.03);
}
.appointment-calendar-day.outside {
    opacity: .32;
}
.appointment-calendar-day.today {
    position: relative;
    z-index: 1;
    background: rgba(255,145,0,.045);
    box-shadow: inset 0 0 0 1px rgba(255,145,0,.90), inset 0 0 14px rgba(255,145,0,.08);
}
.appointment-calendar-day-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    margin: 0 0 4px;
    padding: 0 4px;
    border-radius: 10px;
    color: #8a9696;
    font-family: Arial, sans-serif;
    font-size: 11px;
    pointer-events: none;
}
.appointment-calendar-day:hover,
.appointment-calendar-day:focus,
.appointment-calendar-day:focus-visible {
    outline: 0;
    background: rgba(0,255,255,.04);
    box-shadow: inset 0 0 0 1px rgba(0,255,255,.58), inset 0 0 14px rgba(0,255,255,.045);
}
.appointment-calendar-day:hover .appointment-calendar-day-number,
.appointment-calendar-day:focus .appointment-calendar-day-number {
    color: #0ff;
}
.appointment-calendar-day.today .appointment-calendar-day-number {
    color: #ffad3d;
    text-shadow: 0 0 7px rgba(255,145,0,.35);
}
.appointment-calendar-day.today:hover,
.appointment-calendar-day.today:focus,
.appointment-calendar-day.today:focus-visible {
    background: rgba(255,145,0,.06);
    box-shadow: inset 0 0 0 1px rgba(255,145,0,.98), inset 0 0 16px rgba(255,145,0,.10);
}
.appointment-calendar-day.today:hover .appointment-calendar-day-number,
.appointment-calendar-day.today:focus .appointment-calendar-day-number {
    color: #ffc46f;
}
.appointment-calendar-week-number {
    min-height: 104px;
    border: 0;
    border-left: 1px solid rgba(0,255,255,.22);
    border-right: 1px solid rgba(0,255,255,.30);
    border-bottom: 1px solid rgba(0,255,255,.22);
    background: rgba(0,255,255,.016);
    color: #4d9fff;
    font-family: Arial, sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-shadow: 0 0 5px rgba(77,159,255,.22);
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 6px 0;
    cursor: pointer;
    user-select: none;
}
.appointment-calendar-week-number:hover,
.appointment-calendar-week-number:focus,
.appointment-calendar-week-number:focus-visible,
.appointment-calendar-week-number.active {
    outline: 0;
    color: #7db9ff;
    background: rgba(77,159,255,.065);
    box-shadow: inset 0 0 0 1px rgba(77,159,255,.48), 0 0 9px rgba(77,159,255,.13);
    text-shadow: 0 0 7px rgba(77,159,255,.34);
}
.appointment-week-stack {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1.05;
}
.appointment-week-stack > span {
    display: block;
}
.appointment-week-gap {
    height: 4px;
}
.appointments-calendar-grid.week-view .appointment-calendar-week-number,
.appointments-calendar-grid.week-view .appointment-calendar-day {
    min-height: 420px;
}
.appointments-calendar-grid.week-view .appointment-calendar-day {
    padding: 8px;
}
.appointments-calendar-grid.week-view .appointment-calendar-day::before {
    content: attr(data-weekday-label);
    display: none;
}
.appointments-calendar-grid.week-view .appointment-calendar-event {
    white-space: normal;
    line-height: 1.35;
    padding: 5px 6px;
}
.appointments-month-label.week-mode {
    min-width: 180px;
}
.appointment-calendar-event {
    display: block;
    width: 100%;
    min-width: 0;
    border: 0;
    border-left: 1px solid rgba(0,255,255,.50);
    background: rgba(0,255,255,.025);
    color: #aaa;
    font-family: Arial, sans-serif;
    font-size: 11px;
    padding: 3px 4px;
    margin: 3px 0;
    cursor: pointer;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.appointment-calendar-event:hover {
    color: #0ff;
    background: rgba(0,255,255,.055);
    text-shadow: 0 0 6px rgba(0,255,255,.18);
}
.appointment-editor-dialog {
    width: min(1100px, calc(100vw - 30px));
    max-width: 1100px;
    padding: 0;
    border: 1px solid rgba(0,255,255,.28);
    border-radius: 8px;
    background: #222;
    color: #ccc;
    box-shadow: 0 0 24px rgba(0,255,255,.12);
}
.appointment-editor-dialog::backdrop {
    background: rgba(0,0,0,.68);
    backdrop-filter: blur(2px);
}
.appointment-editor-frame {
    padding: 14px 16px 16px;
}
.appointment-editor-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(0,255,255,.12);
}
.appointment-editor-header h1 {
    margin: 0;
    color: #0ff;
    font-size: 16px;
    font-weight: normal;
    text-shadow: 0 0 7px rgba(0,255,255,.18);
}
.appointment-editor-close {
    width: 22px;
    height: 22px;
    border: 1px solid rgba(255,90,90,.26);
    border-radius: 50%;
    background: transparent;
    color: rgba(255,110,110,.66);
    cursor: pointer;
    font-size: 15px;
    line-height: 18px;
}
.appointment-editor-close:hover {
    color: #ff8a8a;
    border-color: rgba(255,90,90,.58);
    box-shadow: 0 0 8px rgba(255,70,70,.12);
}
.appointment-editor-body .appointment-entry-shell {
    margin: 0;
    border-bottom: 0;
}
.appointment-editor-body .appointment-entry-grid {
    padding-bottom: 2px;
}
.appointment-editor-body #appointmentSave {
    display: none;
}
.appointment-editor-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
}
.appointment-dialog-save {
    min-width: 82px;
    border: 1px solid rgba(0,255,136,.38);
    border-radius: 3px;
    background: transparent;
    color: rgba(100,255,175,.88);
    padding: 6px 14px;
    font-family: Arial, sans-serif;
    font-size: 13px;
    cursor: pointer;
    box-shadow: 0 0 7px rgba(0,255,136,.07);
}
.appointment-dialog-save:hover,
.appointment-dialog-save:focus {
    outline: 0;
    color: #9fffc7;
    border-color: rgba(0,255,136,.68);
    box-shadow: 0 0 10px rgba(0,255,136,.16);
}
.appointment-editor-day-section {
    margin-top: 14px;
    padding-top: 11px;
    border-top: 1px solid rgba(0,255,255,.14);
}
.appointment-editor-day-section[hidden] { display: none !important; }
.appointment-editor-day-title {
    margin-bottom: 7px;
    color: #0ff;
    font-family: Arial, sans-serif;
    font-size: 13px;
    text-transform: capitalize;
    text-shadow: 0 0 6px rgba(0,255,255,.16);
}
.appointment-editor-day-list {
    display: grid;
    gap: 2px;
    max-height: 210px;
    overflow-y: auto;
}
.appointment-editor-day-item {
    display: grid;
    grid-template-columns: 92px 118px minmax(0,1fr);
    gap: 9px;
    align-items: center;
    width: 100%;
    border: 0;
    border-bottom: 1px solid #333;
    background: transparent;
    color: #aaa;
    padding: 6px 4px;
    cursor: pointer;
    font-family: Arial, sans-serif;
    font-size: 12px;
    text-align: left;
}
.appointment-editor-day-item:hover,
.appointment-editor-day-item.active {
    background: rgba(0,255,255,.025);
    color: #ddd;
    border-bottom-color: rgba(0,255,255,.24);
}
.appointment-editor-day-item.active {
    box-shadow: inset 2px 0 0 rgba(0,255,255,.50);
}
.appointment-editor-day-time { color: #0ff; }
.appointment-editor-day-name { color: #ccc; }
.appointment-editor-day-details {
    overflow: hidden;
    color: #888;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.appointment-editor-day-empty {
    color: #666;
    padding: 8px 4px;
    font-family: Arial, sans-serif;
    font-size: 12px;
    font-style: italic;
}
.appointments-status {
    margin-top: 10px;
}
.profile-backup-card h2 {
    margin: 0 0 8px;
    color: #0ff;
    font-size: 18px;
    font-weight: 500;
    text-align: center;
}
.profile-backup-intro { text-align: center; margin: 0 auto 18px; max-width: 560px; }
.profile-backup-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}
.profile-backup-section {
    border-top: 1px solid rgba(0,255,255,.16);
    padding-top: 12px;
}
.profile-backup-section h3 {
    margin: 0 0 7px;
    color: #0ff;
    font-size: 14px;
    font-weight: 500;
}
.profile-backup-section p { min-height: 42px; margin: 0 0 12px; }
.profile-backup-form { display: grid; gap: 8px; }
.profile-backup-form label { color: #aaa; font-size: 12px; font-weight: normal; }
.profile-backup-file,
.profile-backup-select {
    width: 100%;
    background: transparent;
    color: #ccc;
    border: 0;
    border-bottom: 1px solid rgba(0,255,255,.18);
    border-radius: 0;
    padding: 7px 2px;
}
.profile-backup-file:focus,
.profile-backup-select:focus {
    outline: 0;
    border-bottom-color: rgba(0,255,255,.62);
    box-shadow: 0 3px 8px -6px rgba(0,255,255,.8);
}
.profile-backup-select option { background: #222; color: #ccc; }
.profile-backup-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    min-width: 125px;
    margin-top: 3px;
    text-decoration: none;
}

@media (max-width: 1050px) {
    .appointments-list-panel {
        overflow-x: hidden !important;
    }
    .appointments-table,
    .appointments-table tbody {
        display: block;
        width: 100%;
        max-width: 100%;
    }
    .appointments-table thead {
        display: none;
    }
    .appointments-table tbody tr.appointment-list-row {
        display: grid;
        grid-template-columns: repeat(4, minmax(0,1fr)) 30px;
        grid-template-rows: auto auto;
        gap: 2px 12px;
        width: 100%;
        max-width: 100%;
        margin: 0 0 8px;
        padding: 8px 7px;
        border: 1px solid rgba(0,255,255,.15);
        border-radius: 7px;
        background: rgba(255,255,255,.012);
        box-sizing: border-box;
    }
    .appointments-table tbody tr.appointment-list-row:hover,
    .appointments-table tbody tr.appointment-list-row:focus,
    .appointments-table tbody tr.appointment-list-row:focus-visible {
        border-color: rgba(0,255,255,.30);
        background: rgba(0,255,255,.025);
    }
    .appointments-table tbody tr.appointment-list-row td {
        display: block;
        min-width: 0;
        padding: 3px 2px;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        white-space: normal;
        overflow-wrap: anywhere;
    }
    .appointments-table tbody tr.appointment-list-row td::before {
        content: none !important;
        display: none !important;
    }
    .appointments-table tbody tr.appointment-list-row td:nth-child(1) { grid-column: 1; grid-row: 1; }
    .appointments-table tbody tr.appointment-list-row td:nth-child(2) { grid-column: 2; grid-row: 1; }
    .appointments-table tbody tr.appointment-list-row td:nth-child(3) { grid-column: 3; grid-row: 1; }
    .appointments-table tbody tr.appointment-list-row td:nth-child(4) { grid-column: 4; grid-row: 1; }
    .appointments-table tbody tr.appointment-list-row td:nth-child(5) { grid-column: 1; grid-row: 2; }
    .appointments-table tbody tr.appointment-list-row td:nth-child(6) { grid-column: 2 / span 2; grid-row: 2; }
    .appointments-table tbody tr.appointment-list-row td:nth-child(7) { grid-column: 4; grid-row: 2; }
    .appointments-table tbody tr.appointment-list-row .appointment-action-cell {
        grid-column: 5;
        grid-row: 1 / span 2;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        padding-top: 4px;
    }
    .appointments-table tbody tr.appointment-list-row .appointment-action-cell::before {
        display: none;
    }
    .appointment-description-cell {
        white-space: normal;
    }
    .appointments-empty {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }
}
@media (max-width: 760px) {
    .appointments-table tbody tr.appointment-list-row {
        grid-template-columns: repeat(2, minmax(0,1fr)) 30px;
        grid-template-rows: auto auto auto auto;
        gap: 2px 10px;
    }
    .appointments-table tbody tr.appointment-list-row td:nth-child(1) { grid-column: 1; grid-row: 1; }
    .appointments-table tbody tr.appointment-list-row td:nth-child(2) { grid-column: 2; grid-row: 1; }
    .appointments-table tbody tr.appointment-list-row td:nth-child(3) { grid-column: 1; grid-row: 2; }
    .appointments-table tbody tr.appointment-list-row td:nth-child(4) { grid-column: 2; grid-row: 2; }
    .appointments-table tbody tr.appointment-list-row td:nth-child(5) { grid-column: 1; grid-row: 3; }
    .appointments-table tbody tr.appointment-list-row td:nth-child(6) { grid-column: 2; grid-row: 3; }
    .appointments-table tbody tr.appointment-list-row td:nth-child(7) { grid-column: 1 / span 2; grid-row: 4; }
    .appointments-table tbody tr.appointment-list-row .appointment-action-cell {
        grid-column: 3;
        grid-row: 1 / span 4;
    }
}
@media (max-width: 500px) {
    .appointments-table tbody tr.appointment-list-row {
        grid-template-columns: minmax(0,1fr) 28px;
        grid-template-rows: repeat(7, auto);
        gap: 1px 8px;
    }
    .appointments-table tbody tr.appointment-list-row td:nth-child(1) { grid-column: 1; grid-row: 1; }
    .appointments-table tbody tr.appointment-list-row td:nth-child(2) { grid-column: 1; grid-row: 2; }
    .appointments-table tbody tr.appointment-list-row td:nth-child(3) { grid-column: 1; grid-row: 3; }
    .appointments-table tbody tr.appointment-list-row td:nth-child(4) { grid-column: 1; grid-row: 4; }
    .appointments-table tbody tr.appointment-list-row td:nth-child(5) { grid-column: 1; grid-row: 5; }
    .appointments-table tbody tr.appointment-list-row td:nth-child(6) { grid-column: 1; grid-row: 6; }
    .appointments-table tbody tr.appointment-list-row td:nth-child(7) { grid-column: 1; grid-row: 7; }
    .appointments-table tbody tr.appointment-list-row .appointment-action-cell {
        grid-column: 2;
        grid-row: 1 / span 7;
    }
    .appointments-table tbody tr.appointment-list-row td {
        display: block;
    }
}

@media (max-width: 1120px) {
    .appointment-entry-head { display: none; }
    .appointment-entry-grid {
        grid-template-columns: minmax(125px,.78fr) minmax(240px,1.42fr) minmax(92px,.58fr) 34px;
        grid-template-rows: auto auto auto;
        gap: 8px 10px;
        min-width: 0;
        padding-top: 4px;
    }
    .appointment-entry-grid > * { min-width: 0; }
    .appointment-entry-grid #appointmentTitle {
        grid-column: 1;
        grid-row: 1;
    }
    .appointment-entry-grid > .appointment-datetime-pair:nth-child(2) {
        grid-column: 2;
        grid-row: 1;
    }
    .appointment-entry-grid .appointment-field-duration {
        grid-column: 3;
        grid-row: 1;
    }
    .appointment-entry-grid #appointmentSave {
        grid-column: 4;
        grid-row: 1;
        justify-self: center;
    }
    .appointment-entry-grid > .appointment-datetime-pair:nth-child(4) {
        grid-column: 1 / span 2;
        grid-row: 2;
    }
    .appointment-entry-grid #appointmentLocation {
        grid-column: 3 / span 2;
        grid-row: 2;
    }
    .appointment-entry-grid #appointmentDescription {
        grid-column: 1 / -1;
        grid-row: 3;
    }
}

@media (max-width: 980px) {
    .appointments-calendar-panel.week-view-scroll {
        overflow-x: hidden;
        overflow-y: visible;
    }
    .appointments-calendar-panel.week-view-scroll .appointments-weekdays.week-view {
        display: none;
    }
    .appointments-calendar-panel.week-view-scroll .appointments-calendar-grid.week-view {
        display: grid;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        grid-template-columns: minmax(0,1fr);
    }
    .appointments-calendar-panel.week-view-scroll .appointment-calendar-week-number {
        min-width: 0;
        min-height: 34px;
        writing-mode: horizontal-tb;
        transform: none;
        flex-direction: row;
        padding: 6px 10px;
        border-left: 1px solid rgba(0,255,255,.22);
        border-right: 1px solid rgba(0,255,255,.22);
        font-size: 10px;
    }
    .appointments-calendar-panel.week-view-scroll .appointment-calendar-day {
        min-width: 0;
        min-height: 96px;
        padding: 8px 10px;
    }
    .appointments-calendar-panel.week-view-scroll .appointment-calendar-day::before {
        display: block;
        margin: 0 0 7px;
        color: #0ff;
        font-family: Arial, sans-serif;
        font-size: 12px;
        text-shadow: 0 0 6px rgba(0,255,255,.18);
    }
    .appointments-calendar-panel.week-view-scroll .appointment-calendar-day.today::before {
        color: #ffad3d;
        text-shadow: 0 0 7px rgba(255,145,0,.30);
    }
    .appointments-calendar-panel.week-view-scroll .appointment-calendar-day-number {
        display: none;
    }
    .appointments-calendar-panel.week-view-scroll .appointment-calendar-event {
        font-size: 10px;
        line-height: 1.25;
        white-space: normal;
    }
}

@media (max-width: 760px) {
    .profile-backup-grid { grid-template-columns: 1fr; }
    .profile-backup-section p { min-height: 0; }
    .appointments-panel { max-width: calc(100vw - 20px); }
    .appointments-toolbar { align-items: flex-start; gap: 12px; }
    .appointments-calendar-nav { width: 100%; justify-content: flex-start; margin-left: 0; }
    .appointments-month-label { min-width: 106px; }
    .appointments-weekdays, .appointments-calendar-grid {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        grid-template-columns: 24px repeat(7,minmax(0,1fr));
    }
    .appointments-weekdays { font-size: 9px; }
    .appointments-weekdays span { min-width: 0; padding: 6px 1px 5px; overflow: hidden; }
    .appointment-calendar-day { min-width: 0; min-height: 82px; padding: 3px 2px; }
    .appointment-calendar-day-number { min-width: 16px; height: 16px; padding: 0 2px; font-size: 9px; }
    .appointment-calendar-week-number { min-width: 0; min-height: 82px; font-size: 8px; }
    .appointment-calendar-event { padding: 2px; margin: 2px 0; font-size: 9px; }
    .appointments-calendar-panel { overflow-x: hidden; }
    .appointments-calendar-panel.week-view-scroll { overflow-x: hidden; }
    .appointments-calendar-panel.week-view-scroll .appointments-weekdays.week-view {
        display: none;
    }
    .appointments-calendar-panel.week-view-scroll .appointments-calendar-grid.week-view {
        display: grid;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        grid-template-columns: minmax(0,1fr);
    }
    .appointments-calendar-panel.week-view-scroll .appointment-calendar-week-number {
        min-width: 0;
        min-height: 34px;
        writing-mode: horizontal-tb;
        transform: none;
        flex-direction: row;
        padding: 6px 10px;
        border-left: 1px solid rgba(0,255,255,.22);
        border-right: 1px solid rgba(0,255,255,.22);
        font-size: 10px;
    }
    .appointments-calendar-panel.week-view-scroll .appointment-calendar-day {
        min-width: 0;
        min-height: 96px;
        padding: 8px 10px;
    }
    .appointments-calendar-panel.week-view-scroll .appointment-calendar-day::before {
        display: block;
        margin: 0 0 7px;
        color: #0ff;
        font-family: Arial, sans-serif;
        font-size: 12px;
        text-shadow: 0 0 6px rgba(0,255,255,.18);
    }
    .appointments-calendar-panel.week-view-scroll .appointment-calendar-day.today::before {
        color: #ffad3d;
        text-shadow: 0 0 7px rgba(255,145,0,.30);
    }
    .appointments-calendar-panel.week-view-scroll .appointment-calendar-day-number {
        display: none;
    }
    .appointments-calendar-panel.week-view-scroll .appointment-calendar-event {
        font-size: 10px;
        line-height: 1.25;
        white-space: normal;
    }
    .appointment-editor-dialog { width: calc(100vw - 18px); }
    .appointment-editor-frame { padding: 12px 10px 14px; }
    .appointment-editor-day-item { grid-template-columns: 72px 92px minmax(0,1fr); gap: 6px; }
    .appointment-entry-head { display: none; }
    .appointment-entry-grid {
        grid-template-columns: minmax(0,1fr) minmax(0,1fr);
        grid-template-rows: none;
        gap: 8px 10px;
        min-width: 0;
        padding-top: 4px;
    }
    .appointment-entry-grid > * {
        grid-column: auto;
        grid-row: auto;
        min-width: 0;
    }
    .appointment-entry-grid #appointmentTitle,
    .appointment-entry-grid #appointmentLocation,
    .appointment-entry-grid #appointmentDescription { grid-column: 1 / -1; }
    .appointment-datetime-pair { grid-template-columns: minmax(0, 1fr) 58px; }
    .appointment-row-save { justify-self: end; grid-column: 2; }
    .appointment-calendar-day { min-height: 76px; padding: 3px; }
    .appointment-calendar-event { font-size: 9px; padding: 2px 3px; }
}


/* ToDoList centered responsive sizing v070 */
.minimal-memor-panel {
    width: calc(100vw - 30px);
    max-width: calc(100vw - 30px);
    margin-left: calc(50% - 50vw + 15px);
    margin-right: 0;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 230px !important;
    box-sizing: border-box;
}
.memor-table-wrap {
    width: 908px;
    max-width: 100%;
    margin-left: auto !important;
    margin-right: auto !important;
    overflow-x: hidden !important;
    overflow-y: visible;
    position: relative;
    box-sizing: border-box;
}
.todolist-grid-table {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin: 0 !important;
    table-layout: fixed;
    box-sizing: border-box;
}
.todolist-grid-table col.todo-col-color,
.todolist-grid-table col.todo-col-status,
.todolist-grid-table col.todo-col-select {
    min-width: 0;
    max-width: none;
}
.todo-col-resizer-divider { right: -4px; }
.todo-col-resizer-left {
    left: 0;
    right: auto;
}
.todo-col-resizer-right {
    right: 0;
}
.todo-col-resizer-outer { z-index: 95; }
@media (max-width: 520px) {
    .appointments-panel { max-width: calc(100vw - 12px); }
    .appointments-weekdays, .appointments-calendar-grid {
        grid-template-columns: 20px repeat(7,minmax(0,1fr));
    }
    .appointments-weekdays { font-size: 8px; }
    .appointments-weekdays span { padding-left: 0; padding-right: 0; }
    .appointment-calendar-day { min-height: 68px; padding: 2px 1px; }
    .appointment-calendar-week-number { min-height: 68px; font-size: 7px; letter-spacing: 0; }
    .appointment-calendar-day-number { min-width: 14px; height: 14px; font-size: 8px; margin-bottom: 2px; }
    .appointment-calendar-event {
        border-left-width: 1px;
        padding: 1px;
        margin: 1px 0;
        font-size: 8px;
        line-height: 1.15;
    }
    .appointments-calendar-panel.week-view-scroll .appointment-calendar-day {
        min-height: 84px;
        padding: 7px 8px;
    }
    .appointments-calendar-panel.week-view-scroll .appointment-calendar-day::before {
        margin-bottom: 5px;
        font-size: 11px;
    }
    .appointments-calendar-panel.week-view-scroll .appointment-calendar-event {
        font-size: 9px;
        padding: 3px 4px;
        margin: 2px 0;
    }

    .minimal-memor-panel { padding-bottom: 190px !important; }
    .todolist-grid-table th,
    .todolist-grid-table td { padding-left: 3px; padding-right: 3px; }
}



@media (max-width: 1050px) {
    .appointments-panel,
    .appointments-list-panel,
    .appointments-table,
    .appointments-table tbody,
    .appointments-table tbody tr.appointment-list-row {
        max-width: 100%;
        min-width: 0;
        overflow-x: hidden;
    }
    .appointments-table tbody tr.appointment-list-row > td {
        min-width: 0;
        max-width: 100%;
        overflow-wrap: anywhere;
        word-break: break-word;
    }
}


/* Modern navigation treatment v089 */
:root {
    --menu-cyan: #00ffff;
    --menu-cyan-soft: rgba(0,255,255,.20);
    --menu-cyan-faint: rgba(0,255,255,.055);
    --menu-surface: rgba(12,22,22,.78);
    --menu-text: #d8ffff;
}

























































/* Compact navigation, search and link typography v094 */
.google-search-form {
    width: 100%;
    margin: 8px auto 0;
}
.google-search-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 5px;
    width: min(90%, 500px);
    margin: 0 auto;
    align-items: stretch;
}
.google-search-row input[type="text"],
.google-search-row input[type="submit"] {
    min-width: 0;
    height: 27px;
    margin: 0;
    border: 1px solid #777;
    border-radius: 0;
    font-family: "Segoe UI Variable Text", "Aptos", "Inter", "Helvetica Neue", Arial, sans-serif;
    font-size: 12px;
    line-height: 1;
}
.google-search-row input[type="text"] {
    width: 100%;
    max-width: none;
    padding: 4px 7px;
    color: #222;
    background: #fff;
    outline: 0;
    box-shadow: none;
}
.google-search-row input[type="text"]::placeholder {
    color: #777;
    opacity: 1;
    font-weight: 350;
    letter-spacing: .035em;
}
.google-search-row input[type="text"]:focus {
    outline: 0 !important;
    box-shadow: none !important;
    border-color: #777;
}
.google-search-row input[type="submit"] {
    padding: 4px 11px;
    color: #222;
    background: #efefef;
    cursor: pointer;
}

.edit-toolbar,
.edit-toolbar a,
.edit-toolbar a:hover,
.edit-toolbar a:visited,
.edit-toolbar .link-save-status {
    font-family: "Segoe UI Variable Text", "Aptos", "Inter", "Helvetica Neue", Arial, sans-serif;
    font-size: 11px;
    font-weight: 520;
    letter-spacing: .085em;
    text-transform: uppercase;
}

.category-title-row h1 {
    font-family: "Segoe UI Variable Display", "Aptos Display", "Inter", "Helvetica Neue", Arial, sans-serif;
    font-size: 17px;
    font-weight: 350;
    letter-spacing: .075em;
    line-height: 1.25;
    text-transform: none;
    text-shadow: 0 0 7px rgba(0,255,255,.14);
}

.link-row a.frontpagemenu,
.link-row a.frontpagemenu:hover,
.link-row a.frontpagemenu:visited {
    font-family: "Segoe UI Variable Text", "Aptos", "Inter", "Helvetica Neue", Arial, sans-serif;
    font-size: 13px;
    font-weight: 350;
    letter-spacing: .025em;
    line-height: 1.45;
}

@media (max-width: 760px) {
    
    
    
    
    .google-search-form {
        margin-top: 4px;
    }
    .google-search-row {
        width: min(90%, 500px);
    }
}

@media (max-width: 300px) {
    .google-search-row {
        grid-template-columns: 1fr;
        width: 90%;
    }
    .google-search-row input[type="submit"] {
        width: 100%;
    }
}


/* Unified ToDoList typography and brighter appointment rows v095 */
.memor-panel,
.memor-table-wrap,
table.memor-table,
.todo-filter-panel,
.todo-import-textfile-panel,
.memor-status,
.memor-status-line {
    font-family: "Segoe UI Variable Text", "Aptos", "Inter", "Helvetica Neue", Arial, sans-serif;
}

table.memor-table th,
.todo-sort-header,
.todo-filter-label {
    font-family: "Segoe UI Variable Display", "Aptos Display", "Inter", "Helvetica Neue", Arial, sans-serif;
    font-weight: 480;
    letter-spacing: .065em;
}

table.memor-table th {
    font-size: 12px;
}

table.memor-table td,
.memor-input,
.table-input,
.task-edit-input,
.category-suggestion-option,
.todo-filter-panel,
.todo-filter-select,
.todo-filter-choice,
.mini-link-button,
.memory-login-save-button,
.memor-status,
.memor-status-line,
.memor-status-link {
    font-family: "Segoe UI Variable Text", "Aptos", "Inter", "Helvetica Neue", Arial, sans-serif;
    font-weight: 350;
    letter-spacing: .018em;
}

table.memor-table td,
.memor-input,
.table-input,
.task-edit-input,
.category-suggestion-option {
    font-size: 13px;
}

.todo-sort-header {
    font-size: 12px;
    font-weight: 500;
}

.new-memory-row .memor-input::placeholder,
.task-edit-input::placeholder {
    font-family: "Segoe UI Variable Text", "Aptos", "Inter", "Helvetica Neue", Arial, sans-serif;
    font-weight: 320;
    letter-spacing: .025em;
}

/* Keep icon glyphs visually stable while the surrounding text uses the modern typeface. */
.circle-icon-button,
.green-check-button,
.red-delete-button,
.todo-action-heading-symbol,
.status-heading-symbol,
.task-status-button,
.task-color-button,
.filter-clear-button {
    font-family: Arial, sans-serif;
}

/* Appointment list: use the same light neutral tone as the Links page. */
.appointments-table td,
.appointments-table td:nth-child(1),
.appointments-table td:nth-child(2),
.appointments-table td:nth-child(3),
.appointments-table td:nth-child(6),
.appointment-description-cell,
.appointment-title-button {
    color: #cccccc !important;
}

.appointments-table tbody tr.appointment-list-row {
    opacity: .96;
}

.appointments-table tbody tr.appointment-list-row:hover,
.appointments-table tbody tr.appointment-list-row:focus,
.appointments-table tbody tr.appointment-list-row:focus-visible {
    opacity: 1;
}


/* Unified application typography v096 */
:root {
    --upunkt-ui-font: "Segoe UI Variable Text", "Aptos", "Inter", "Helvetica Neue", Arial, sans-serif;
    --upunkt-display-font: "Segoe UI Variable Display", "Aptos Display", "Inter", "Helvetica Neue", Arial, sans-serif;
}

/* Appointments */
.appointments-panel,
.appointments-panel input,
.appointments-panel textarea,
.appointments-panel select,
.appointments-panel button,
.appointments-panel label,
.appointments-panel .appointment-list-row,
.appointments-panel .appointment-calendar-event,
.appointment-editor-dialog,
.appointment-editor-dialog input,
.appointment-editor-dialog textarea,
.appointment-editor-dialog select,
.appointment-editor-dialog button,
.appointment-editor-dialog label {
    font-family: var(--upunkt-ui-font);
}

.appointments-view-button,
.appointments-calendar-mode-button,
.appointments-add-button,
.appointments-nav-button,
.appointments-month-label,
.appointment-calendar-day-number,
.appointment-calendar-week-number,
.appointment-entry-head,
.appointment-list-title,
.appointment-dialog-title {
    font-family: var(--upunkt-display-font);
    letter-spacing: .045em;
}

.appointments-view-button,
.appointments-calendar-mode-button,
.appointments-nav-button {
    font-weight: 520;
}

.appointment-title-button,
.appointment-calendar-event,
.appointment-description-cell,
.appointment-location-cell,
.appointments-table td {
    font-weight: 350;
    letter-spacing: .015em;
}

.appointment-entry-shell input,
.appointment-entry-shell textarea,
.appointment-entry-shell select,
.appointment-editor-dialog input,
.appointment-editor-dialog textarea,
.appointment-editor-dialog select {
    font-weight: 350;
    letter-spacing: .018em;
}

/* Login, register and password reset */
.card.narrow,
.card.narrow form,
.card.narrow input,
.card.narrow select,
.card.narrow textarea,
.card.narrow button,
.card.narrow label,
.card.narrow p,
.card.narrow a {
    font-family: var(--upunkt-ui-font);
}

.card.narrow > h1,
.card.narrow > h2,
.card.narrow > h3,
.card.narrow form h1,
.card.narrow form h2 {
    font-family: var(--upunkt-display-font);
    font-weight: 420;
    letter-spacing: .065em;
}

.card-form label,
.login-register-form label {
    font-weight: 420;
    letter-spacing: .035em;
}

.card-form .input,
.login-register-form .input {
    font-weight: 350;
    letter-spacing: .018em;
}

.card-form .button,
.login-register-form .button,
.primary-dialog-button {
    font-family: var(--upunkt-ui-font);
    font-weight: 560;
    letter-spacing: .055em;
}

.password-help-link {
    margin: 8px 0 0;
    font-size: 0.92rem;
}

.dialog-message {
    font-family: var(--upunkt-ui-font);
    font-weight: 350;
}

/* Profile and settings */
.profile-card,
.profile-card input,
.profile-card select,
.profile-card button,
.profile-card label,
.profile-card a,
.profile-card p,
.profile-card dt,
.profile-card dd {
    font-family: var(--upunkt-ui-font);
}

.profile-card > h1,
.profile-card > h2,
.profile-backup-section h3 {
    font-family: var(--upunkt-display-font);
    font-weight: 420;
    letter-spacing: .065em;
}

.profile-list dt {
    font-weight: 470;
    letter-spacing: .035em;
}

.profile-list dd,
.profile-value,
.profile-backup-intro,
.profile-backup-section p,
.muted-text {
    font-weight: 350;
    letter-spacing: .012em;
}

.profile-inline-input,
.profile-backup-file,
.profile-backup-select {
    font-family: var(--upunkt-ui-font);
    font-weight: 350;
}
.profile-preferences-card {
    padding-top: 16px;
    padding-bottom: 16px;
}
.profile-preferences-form {
    display: grid;
    gap: 6px;
}
.profile-calendar-color-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    color: #c7cccc;
    font-size: 13px;
}
.profile-calendar-color-input {
    width: 42px;
    height: 24px;
    padding: 0;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
}
.profile-calendar-color-input::-webkit-color-swatch-wrapper { padding: 2px; }
.profile-calendar-color-input::-webkit-color-swatch { border: 0; border-radius: 2px; }
.profile-calendar-color-input::-moz-color-swatch { border: 0; border-radius: 2px; }
.profile-preference-hint {
    color: #6f7777;
    font-size: 10px;
    line-height: 1.35;
}

/* Admin and user administration */
.admin-panel,
.admin-panel input,
.admin-panel select,
.admin-panel button,
.admin-panel label,
.admin-panel a,
.admin-panel p,
.admin-panel div,
.user-table,
.user-table input,
.user-table select,
.user-table button,
.user-table a {
    font-family: var(--upunkt-ui-font);
}

.admin-panel > .text-center h1,
.admin-section h2,
.admin-backup-title,
.admin-number,
.user-table th {
    font-family: var(--upunkt-display-font);
}

.admin-panel > .text-center h1,
.admin-section h2,
.admin-backup-title {
    font-weight: 420;
    letter-spacing: .065em;
}

.admin-number {
    font-weight: 520;
    letter-spacing: .035em;
}

.admin-label,
.admin-muted,
.admin-note,
.admin-backup-copy,
.user-table td {
    font-weight: 350;
    letter-spacing: .012em;
}

.user-table th {
    font-weight: 480;
    letter-spacing: .045em;
}

.admin-import-form input[type="file"],
.admin-import-form button,
.file-pick-label,
.neon-button {
    font-family: var(--upunkt-ui-font);
    font-weight: 520;
    letter-spacing: .035em;
}

/* Remaining authenticated placeholder pages */
.container > .text-center,
.container > .text-center h1,
.container > .text-center a,
.container > .muted-text {
    font-family: var(--upunkt-ui-font);
}

.container > .text-center h1 {
    font-family: var(--upunkt-display-font);
    font-weight: 420;
    letter-spacing: .065em;
}


/* Compact Links and refined ToDoList List/Task resizing v097 */
#linksRoot .link-row {
    min-height: 17px;
    line-height: 1.15;
    margin: 0;
}
#linksRoot .link-row a.frontpagemenu,
#linksRoot .link-row a.frontpagemenu:hover,
#linksRoot .link-row a.frontpagemenu:visited {
    line-height: 1.20;
}

/* Give the left outer resize line breathing room from the List heading. */
.todolist-grid-table th[data-col-key="category"] {
    padding-left: 18px;
    overflow: hidden;
}
.todolist-grid-table td:first-child {
    overflow: hidden;
}

/* At the narrowest layout the List column may collapse almost completely,
   allowing Task to use the released width. */
@media (max-width: 520px) {
    .todolist-grid-table th[data-col-key="category"] {
        padding-left: 3px;
    }
    .todolist-grid-table th[data-col-key="category"] .filter-header-wrap {
        min-width: 0;
    }
}


/* Combined List/Task filter and sorting headers v098 */
.todo-combined-header {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    max-width: 100%;
    padding: 1px 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color .14s ease, text-shadow .14s ease;
}
.todo-combined-header.filter-active-heading {
    color: #ffd45c;
    text-shadow: 0 0 8px rgba(255,212,92,.32);
}
.todo-combined-header:hover {
    color: #0ff;
    text-shadow: 0 0 9px rgba(0,255,255,.48);
}
.todo-combined-header.filter-active-heading:hover {
    color: #ffe27f;
    text-shadow: 0 0 10px rgba(255,212,92,.42);
}
.todo-filter-sort-row {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin: 0 0 7px;
}
.todo-filter-choice-button {
    border: 1px solid rgba(0,255,255,.12);
    border-radius: 4px;
    padding: 3px 6px;
    color: #bfc7c7;
}
.todo-filter-choice-button.active {
    color: #ffd45c;
    border-color: rgba(255,212,92,.36);
    box-shadow: 0 0 7px rgba(255,212,92,.10);
}
.todo-filter-divider {
    height: 1px;
    margin: 2px 0 7px;
    background: rgba(0,255,255,.10);
}
.todo-filter-empty {
    color: #777;
    padding: 2px 0;
}
.todolist-grid-table th[data-col-key="category"],
.todolist-grid-table th[data-col-key="task"] {
    white-space: nowrap;
}
@media (max-width: 520px) {
    .todo-combined-header {
        font-size: 11px;
        letter-spacing: .025em;
    }
}


/* Appointment editor responsive polish v100 */
.appointment-editor-dialog {
    width: min(920px, calc(100vw - 24px));
    max-width: 920px;
    overflow: hidden;
}
.appointment-editor-frame {
    padding: 16px 18px 18px;
}
.appointment-editor-header {
    margin-bottom: 14px;
    padding-bottom: 10px;
}
.appointment-editor-header h1 {
    font-family: var(--upunkt-display-font);
    font-size: 17px;
    font-weight: 430;
    letter-spacing: .06em;
}
.appointment-editor-body .appointment-entry-head {
    display: none !important;
}
.appointment-editor-body .appointment-entry-shell {
    width: 100%;
    max-width: 100%;
    overflow: visible;
    border-bottom: 0;
}
.appointment-editor-body .appointment-entry-grid {
    display: grid;
    grid-template-columns: minmax(120px,.75fr) minmax(250px,1.5fr) minmax(92px,.55fr) minmax(250px,1.5fr);
    grid-template-areas:
        "title start duration end"
        "location location description description";
    gap: 14px 16px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 2px 0 4px;
}
.appointment-editor-body #appointmentTitle { grid-area: title; }
.appointment-editor-body .appointment-start-pair { grid-area: start; }
.appointment-editor-body .appointment-field-duration { grid-area: duration; }
.appointment-editor-body .appointment-end-pair { grid-area: end; }
.appointment-editor-body #appointmentLocation { grid-area: location; }
.appointment-editor-body #appointmentDescription { grid-area: description; }
.appointment-editor-body #appointmentSave { display: none !important; }
.appointment-editor-body .appointment-datetime-pair {
    display: grid;
    grid-template-columns: minmax(0,1fr) 70px;
    gap: 8px;
    width: 100%;
    min-width: 0;
}
.appointment-editor-body .appointment-input,
.appointment-editor-body .appointment-input:focus,
.appointment-editor-body .appointment-input:focus-visible {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: 34px;
    padding: 6px 8px 5px;
    border: 1px solid rgba(0,255,255,.10);
    border-bottom-color: rgba(0,255,255,.30);
    border-radius: 4px;
    background: rgba(255,255,255,.018);
    color: #cccccc;
    font-family: var(--upunkt-ui-font);
    font-size: 13px;
    font-weight: 350;
    letter-spacing: .02em;
    outline: 0 !important;
    box-shadow: none !important;
}
.appointment-editor-body .appointment-input:hover {
    border-color: rgba(0,255,255,.22);
    border-bottom-color: rgba(0,255,255,.48);
    background: rgba(0,255,255,.018);
}
.appointment-editor-body .appointment-input:focus {
    border-color: rgba(0,255,255,.46);
    background: rgba(0,255,255,.025);
    color: #eeeeee;
    box-shadow: 0 0 10px rgba(0,255,255,.055) !important;
}
.appointment-editor-body .appointment-input::placeholder {
    color: #727979;
    opacity: 1;
}
.appointment-editor-actions {
    margin-top: 14px;
}
.appointment-dialog-save {
    min-width: 88px;
    padding: 7px 16px;
    font-family: var(--upunkt-display-font);
    font-size: 12px;
    font-weight: 520;
    letter-spacing: .055em;
}

@media (max-width: 900px) {
    .appointment-editor-dialog {
        width: min(720px, calc(100vw - 20px));
    }
    .appointment-editor-body .appointment-entry-grid {
        grid-template-columns: minmax(0,1fr) minmax(100px,.42fr);
        grid-template-areas:
            "title category"
            "duration location"
            "start start"
            "description description";
        gap: 11px 12px;
    }
}

@media (max-width: 560px) {
    .appointment-editor-dialog {
        width: calc(100vw - 12px);
        max-height: calc(100vh - 12px);
        overflow-y: auto;
    }
    .appointment-editor-frame {
        padding: 12px 10px 14px;
    }
    .appointment-editor-body .appointment-entry-grid {
        grid-template-columns: minmax(0,1fr);
        grid-template-areas:
            "title"
            "category"
            "start"
            "duration"
            "location"
            "description";
        gap: 9px;
    }
    .appointment-editor-body .appointment-datetime-pair {
        grid-template-columns: minmax(0,1fr) 68px;
        gap: 7px;
    }
    .appointment-editor-body .appointment-input,
    .appointment-editor-body .appointment-input:focus,
    .appointment-editor-body .appointment-input:focus-visible {
        height: 36px;
    }
    .appointment-editor-actions {
        position: sticky;
        bottom: 0;
        z-index: 2;
        margin: 12px -2px -2px;
        padding: 9px 2px 2px;
        background: linear-gradient(to bottom, rgba(34,34,34,0), #222 34%);
    }
}

/* Appointment editor responsive layout v101 — authoritative final override */
.appointment-editor-dialog {
    width: min(920px, calc(100dvw - 24px));
    max-width: 920px;
    max-height: calc(100dvh - 24px);
    margin: auto;
    padding: 0;
    overflow: hidden;
    box-sizing: border-box;
}
.appointment-editor-frame {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    max-height: calc(100dvh - 24px);
    min-height: 0;
    padding: 15px 17px 16px;
    box-sizing: border-box;
}
.appointment-editor-header {
    flex: 0 0 auto;
}
.appointment-editor-body {
    min-width: 0;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
}
.appointment-editor-body::-webkit-scrollbar { display: none; }
.appointment-editor-body .appointment-entry-shell {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    overflow: visible;
    border: 0;
    box-sizing: border-box;
}
.appointment-editor-body .appointment-entry-head { display: none !important; }
.appointment-editor-body .appointment-editor-grid {
    display: grid !important;
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    grid-template-areas:
        "title title title category category category duration duration location location location location"
        "start start start start start start start start start start start start"
        "description description description description description description description description description description description description"
        "recurrence recurrence recurrence recurrence recurrence recurrence recurrence recurrence recurrence recurrence recurrence recurrence"
        "scope scope scope scope scope scope scope scope scope scope scope scope" !important;
    gap: 13px 15px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 2px 0 5px !important;
    box-sizing: border-box;
}
.appointment-editor-body .appointment-editor-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    margin: 0;
    box-sizing: border-box;
}
.appointment-editor-body .appointment-field-title { grid-area: title !important; }
.appointment-editor-body .appointment-field-category { grid-area: category !important; }
.appointment-editor-body .appointment-field-duration { grid-area: duration !important; }
.appointment-editor-body .appointment-field-location { grid-area: location !important; }
.appointment-editor-body .appointment-field-start { grid-area: start !important; }
.appointment-editor-body .appointment-field-description { grid-area: description !important; }
.appointment-editor-body .appointment-field-recurrence { grid-area: recurrence !important; }
.appointment-editor-body .appointment-series-scope { grid-area: scope !important; }
.appointment-editor-body .appointment-field-recurrence[hidden],
.appointment-editor-body .appointment-series-scope[hidden] { display: none !important; }
.appointment-recurrence-controls {
    display: grid;
    grid-template-columns: minmax(150px, 1.1fr) minmax(150px, 1fr) minmax(150px, 1fr);
    gap: 10px;
    align-items: end;
}
.appointment-recurrence-date {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 7px;
    align-items: center;
    min-width: 0;
}
.appointment-recurrence-date > span {
    color: #8f9999;
    font-family: var(--upunkt-display-font);
    font-size: 10px;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.appointment-recurrence-select {
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, rgba(0,255,255,.72) 50%), linear-gradient(135deg, rgba(0,255,255,.72) 50%, transparent 50%);
    background-position: calc(100% - 12px) 50%, calc(100% - 8px) 50%;
    background-size: 4px 4px, 4px 4px;
    background-repeat: no-repeat;
    padding-right: 24px !important;
}
.appointment-recurrence-select option {
    background: #222;
    color: #d7dddd;
}
.appointment-series-scope {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.appointment-series-scope-buttons {
    display: inline-flex;
    gap: 5px;
    flex-wrap: wrap;
}
.appointment-series-scope-button {
    border: 1px solid rgba(0,255,255,.18);
    border-radius: 3px;
    background: transparent;
    color: #8f9999;
    padding: 5px 9px;
    font-family: var(--upunkt-display-font);
    font-size: 11px;
    cursor: pointer;
}
.appointment-series-scope-button:hover,
.appointment-series-scope-button:focus {
    outline: 0;
    color: #cfffff;
    border-color: rgba(0,255,255,.42);
    box-shadow: 0 0 8px rgba(0,255,255,.08);
}
.appointment-series-scope-button.active {
    color: #0ff;
    border-color: rgba(0,255,255,.52);
    box-shadow: 0 0 9px rgba(0,255,255,.11);
}
.appointment-field-label {
    color: #8f9999;
    font-family: var(--upunkt-display-font);
    font-size: 10px;
    font-weight: 430;
    line-height: 1;
    letter-spacing: .075em;
    text-transform: uppercase;
}
.appointment-editor-body .appointment-datetime-pair {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(72px, .42fr) !important;
    gap: 8px !important;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}
.appointment-editor-body .appointment-input,
.appointment-editor-body .appointment-input:focus,
.appointment-editor-body .appointment-input:focus-visible {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
}
.appointment-editor-body textarea.appointment-input {
    height: auto !important;
    min-height: 62px;
    max-height: 150px;
    resize: vertical;
    line-height: 1.35;
}
.appointment-editor-body #appointmentSave { display: none !important; }
.appointment-editor-actions {
    position: sticky;
    bottom: 0;
    z-index: 4;
    display: flex;
    justify-content: flex-end;
    margin: 14px 0 0;
    padding: 10px 0 1px;
    background: linear-gradient(to bottom, rgba(34,34,34,0), #222 34%);
}
.appointment-editor-day-section {
    min-width: 0;
    overflow: hidden;
}
.appointment-editor-day-item {
    min-width: 0;
}

@media (max-width: 760px) {
    .appointment-editor-dialog {
        width: min(680px, calc(100dvw - 16px));
        max-height: calc(100dvh - 16px);
    }
    .appointment-editor-frame {
        max-height: calc(100dvh - 16px);
        padding: 13px 12px 14px;
    }
    .appointment-editor-body .appointment-editor-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-template-areas:
            "title category"
            "duration location"
            "start start"
            "end end"
            "description description"
            "recurrence recurrence"
            "scope scope" !important;
        gap: 11px 12px !important;
    }
    .appointment-recurrence-controls {
        grid-template-columns: minmax(130px, 1fr) minmax(130px, 1fr) minmax(130px, 1fr);
    }
}

@media (max-width: 480px) {
    .appointment-editor-dialog {
        width: calc(100dvw - 10px);
        max-height: calc(100dvh - 10px);
        border-radius: 6px;
    }
    .appointment-editor-frame {
        max-height: calc(100dvh - 10px);
        padding: 11px 9px 12px;
    }
    .appointment-editor-header {
        gap: 8px;
        margin-bottom: 10px;
    }
    .appointment-editor-header h1 {
        font-size: 15px;
        letter-spacing: .045em;
    }
    .appointment-editor-body .appointment-editor-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-areas:
            "title"
            "category"
            "start"
            "duration"
            "location"
            "description"
            "recurrence"
            "scope" !important;
        gap: 10px !important;
    }
    .appointment-editor-body .appointment-datetime-pair {
        grid-template-columns: minmax(0, 1fr) 72px !important;
        gap: 7px !important;
    }
    .appointment-recurrence-controls {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
    }
    .appointment-recurrence-date {
        grid-template-columns: 34px minmax(0, 1fr);
    }
    .appointment-series-scope {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
    }
    .appointment-dialog-save {
        width: 100%;
        min-height: 36px;
    }
    .appointment-editor-day-item {
        grid-template-columns: 64px minmax(0, 1fr) !important;
    }
    .appointment-editor-day-item > :nth-child(3) {
        grid-column: 1 / -1;
    }
}

@media (max-width: 340px) {
    .appointment-editor-body .appointment-datetime-pair {
        grid-template-columns: minmax(0, 1fr) !important;
    }
    .appointment-editor-body .appointment-time-input {
        text-align: left;
    }
}


/* Links and calendar refinement v102 */
#linksRoot .category-title-row h1 {
    margin-bottom: 2px;
}
#linksRoot .category-title-row + .link-row {
    margin-top: -1px;
}
#linksRoot .link-row {
    min-height: 16px;
    line-height: 1.08;
}
#linksRoot .link-row a.frontpagemenu,
#linksRoot .link-row a.frontpagemenu:hover,
#linksRoot .link-row a.frontpagemenu:visited {
    line-height: 1.14;
}

/* Calendar typography and English labels */
.appointments-calendar-panel,
.appointments-weekdays,
.appointments-calendar-grid,
.appointment-calendar-day,
.appointment-calendar-day-number,
.appointment-calendar-week-number,
.appointment-calendar-event,
.appointments-month-label,
.appointments-calendar-nav,
.appointments-nav-button {
    font-family: var(--upunkt-ui-font);
}
.appointments-month-label,
.appointment-calendar-day-number,
.appointment-calendar-week-number {
    font-family: var(--upunkt-display-font);
}
.appointments-weekdays {
    font-weight: 430;
    letter-spacing: .055em;
    text-transform: uppercase;
}
.appointment-calendar-day-number {
    font-weight: 430;
    letter-spacing: .035em;
}
.appointment-calendar-event {
    font-weight: 350;
    letter-spacing: .012em;
}

/* Clickable week numbers use blue rather than the normal cyan accent. */
.appointment-calendar-week-number {
    color: #5da9ff;
    border-left-color: rgba(93,169,255,.26);
    border-right-color: rgba(93,169,255,.34);
    background: rgba(35,112,205,.055);
    text-shadow: 0 0 6px rgba(68,151,255,.18);
}
.appointment-calendar-week-number:hover,
.appointment-calendar-week-number:focus,
.appointment-calendar-week-number:focus-visible,
.appointment-calendar-week-number.active {
    color: #8bc3ff;
    background: rgba(55,132,224,.11);
    box-shadow: inset 0 0 0 1px rgba(93,169,255,.50), 0 0 9px rgba(68,151,255,.14);
    text-shadow: 0 0 8px rgba(93,169,255,.42);
}
.appointment-week-chevron {
    color: rgba(93,169,255,.74);
}

/* Narrow month layout: each week becomes 4 days + 3 days, with weekday in each cell. */
@media (max-width: 700px) {
    .appointments-weekdays.month-view {
        display: none;
    }
    .appointments-calendar-grid.month-view {
        display: grid;
        grid-template-columns: 24px repeat(4, minmax(0, 1fr));
        grid-auto-flow: row;
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }
    .appointments-calendar-grid.month-view .appointment-calendar-week-number {
        grid-column: 1;
        grid-row: span 2;
        min-height: 136px;
        writing-mode: vertical-rl;
        transform: rotate(180deg);
        padding: 4px 0;
        font-size: 8px;
    }
    .appointments-calendar-grid.month-view .appointment-calendar-day {
        min-width: 0;
        min-height: 68px;
        padding: 3px 4px;
    }
    .appointments-calendar-grid.month-view .appointment-calendar-day-number {
        display: inline-flex;
        min-width: 0;
        width: auto;
        height: 17px;
        margin-bottom: 3px;
        padding: 0 2px;
        border-radius: 0;
        font-size: 0;
        color: #9aa7a7;
        white-space: nowrap;
    }
    .appointments-calendar-grid.month-view .appointment-calendar-day-number::after {
        content: attr(data-compact-label);
        font-family: var(--upunkt-display-font);
        font-size: 8px;
        font-weight: 470;
        letter-spacing: .045em;
    }
    .appointments-calendar-grid.month-view .appointment-calendar-day.today .appointment-calendar-day-number::after {
        color: #ffad3d;
    }
    .appointments-calendar-grid.month-view .appointment-calendar-event {
        font-size: 8px;
        line-height: 1.15;
        padding: 1px 2px;
        margin: 1px 0;
    }
}

@media (max-width: 430px) {
    .appointments-calendar-grid.month-view {
        grid-template-columns: 21px repeat(4, minmax(0, 1fr));
    }
    .appointments-calendar-grid.month-view .appointment-calendar-week-number {
        min-height: 124px;
        font-size: 7px;
    }
    .appointments-calendar-grid.month-view .appointment-calendar-day {
        min-height: 62px;
        padding: 2px 3px;
    }
    .appointments-calendar-grid.month-view .appointment-calendar-day-number::after {
        font-size: 7px;
        letter-spacing: .025em;
    }
}


/* Calendar week framing and in-cell day labels v103 */
.appointments-weekdays {
    display: none !important;
}
.appointment-calendar-day-number {
    display: block;
    width: 100%;
    min-width: 0;
    height: auto;
    margin: 0 0 6px;
    padding: 0;
    border-radius: 0;
    color: #cccccc;
    font-family: var(--upunkt-display-font);
    font-size: 10px;
    font-weight: 360;
    letter-spacing: .035em;
    line-height: 1.25;
    text-align: left;
    white-space: nowrap;
}
.appointment-calendar-day.today .appointment-calendar-day-number {
    color: #ffad3d;
}
.appointment-calendar-week-number,
.appointment-calendar-day.appointment-week-cell {
    border-top: 1px solid rgba(0,255,255,.34);
    border-bottom: 1px solid rgba(0,255,255,.34);
}
.appointment-calendar-week-number {
    border-left: 1px solid rgba(0,255,255,.34);
    border-right: 1px solid rgba(0,255,255,.34);
    color: #4d9fff;
    background: rgba(77,159,255,.028);
    font-family: var(--upunkt-display-font);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    writing-mode: initial;
    transform: none;
    flex-direction: column;
    gap: 3px;
    padding: 5px 1px;
    text-shadow: 0 0 5px rgba(77,159,255,.22);
}
.appointment-week-stack {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    line-height: 1.02;
}
.appointment-week-stack > span {
    display: block;
}
.appointment-week-chevron {
    color: rgba(204,204,204,.62);
    font-size: 9px;
    line-height: 1;
}
.appointment-calendar-week-number:hover,
.appointment-calendar-week-number:focus,
.appointment-calendar-week-number:focus-visible,
.appointment-calendar-week-number.active {
    color: #7db9ff;
    background: rgba(77,159,255,.07);
    box-shadow: inset 0 0 0 1px rgba(77,159,255,.48), 0 0 9px rgba(77,159,255,.13);
    text-shadow: 0 0 7px rgba(77,159,255,.34);
}
.appointment-calendar-day.week-last-day {
    border-right: 1px solid rgba(0,255,255,.42);
}
.appointment-calendar-day.week-first-day {
    border-left: 1px solid rgba(0,255,255,.20);
}
.appointments-calendar-grid.week-view .appointment-calendar-day,
.appointments-calendar-grid.week-view .appointment-calendar-week-number {
    border-top-color: rgba(0,255,255,.42);
    border-bottom-color: rgba(0,255,255,.42);
}

@media (max-width: 700px) {
    .appointments-calendar-grid.month-view .appointment-calendar-day-number {
        display: block;
        width: 100%;
        min-width: 0;
        height: auto;
        margin-bottom: 4px;
        padding: 0;
        font-size: 8px;
        line-height: 1.15;
        white-space: normal;
    }
    .appointments-calendar-grid.month-view .appointment-calendar-day-number::after {
        content: none;
    }
    .appointments-calendar-grid.month-view .appointment-calendar-week-number {
        writing-mode: initial;
        transform: none;
        min-height: 136px;
        font-size: 8px;
    }
    .appointments-calendar-grid.month-view .appointment-calendar-day.week-mid-day {
        border-right: 1px solid rgba(0,255,255,.42);
    }
}

@media (max-width: 430px) {
    .appointments-calendar-grid.month-view .appointment-calendar-day-number {
        font-size: 7px;
        letter-spacing: .015em;
    }
    .appointments-calendar-grid.month-view .appointment-calendar-week-number {
        min-height: 124px;
        font-size: 7px;
    }
}




.appointment-week-stack > span:first-child {
    margin-bottom: 4px;
}

/* Keep the horizontal navigation until the same breakpoint used by the 4+3 calendar. */
@media (min-width: 701px) and (max-width: 760px) {
    .upunkt-header {
        padding-top: 22px;
        padding-bottom: 6px;
    }
    
    
    
    
    
    
    
    
    
    
    
}

@media (max-width: 700px) {
    .appointments-calendar-grid.month-view .appointment-calendar-day {
        min-height: 78px;
    }
    .appointments-calendar-grid.month-view .appointment-calendar-week-number {
        min-height: 156px;
    }
    .appointments-calendar-grid.month-view .appointment-calendar-day-number {
        font-size: 0;
        white-space: nowrap;
    }
    .appointments-calendar-grid.month-view .appointment-calendar-day-number::after {
        content: attr(data-compact-label);
        font-family: var(--upunkt-display-font);
        font-size: 8px;
        font-weight: 360;
        letter-spacing: .035em;
        line-height: 1.15;
    }
    .appointments-calendar-grid.month-view .appointment-calendar-day.today .appointment-calendar-day-number::after {
        color: #ffad3d;
    }
}

@media (max-width: 430px) {
    .appointments-calendar-grid.month-view .appointment-calendar-day {
        min-height: 70px;
    }
    .appointments-calendar-grid.month-view .appointment-calendar-week-number {
        min-height: 140px;
    }
    .appointments-calendar-grid.month-view .appointment-calendar-day-number::after {
        font-size: 7px;
        letter-spacing: .015em;
    }
}


/* Calendar sizing and week-view refinement v105 */
.appointments-calendar-grid.week-view {
    grid-template-columns: repeat(7, minmax(0, 1fr));
}
.appointments-calendar-grid.week-view .appointment-calendar-week-number {
    display: none !important;
}
.appointments-month-label.week-mode {
    min-width: 150px;
    font-size: 13px;
    letter-spacing: .035em;
}

/* Keep calendar text at least as large as the wide layout. */
.appointment-calendar-day-number,
.appointments-calendar-grid.month-view .appointment-calendar-day-number,
.appointments-calendar-grid.month-view .appointment-calendar-day-number::after {
    font-size: 11px !important;
}
.appointment-calendar-event,
.appointments-calendar-panel.week-view-scroll .appointment-calendar-event {
    font-size: 11px !important;
    line-height: 1.25;
}
.appointment-calendar-week-number,
.appointments-calendar-grid.month-view .appointment-calendar-week-number {
    font-size: 12px !important;
}

@media (max-width: 980px) {
    .appointments-calendar-panel.week-view-scroll .appointments-calendar-grid.week-view {
        grid-template-columns: minmax(0, 1fr);
    }
    .appointments-calendar-panel.week-view-scroll .appointment-calendar-day::before {
        font-size: 12px !important;
    }
}

@media (max-width: 700px) {
    .appointments-calendar-grid.month-view .appointment-calendar-day-number::after {
        font-size: 11px !important;
        letter-spacing: .025em;
    }
    .appointments-calendar-grid.month-view .appointment-calendar-day {
        min-height: 84px;
    }
    .appointments-calendar-grid.month-view .appointment-calendar-week-number {
        min-height: 168px;
    }
}

@media (max-width: 430px) {
    .appointments-calendar-grid.month-view .appointment-calendar-day-number::after {
        font-size: 11px !important;
        letter-spacing: .01em;
    }
    .appointments-calendar-grid.month-view .appointment-calendar-day {
        min-height: 82px;
    }
    .appointments-calendar-grid.month-view .appointment-calendar-week-number {
        min-height: 164px;
    }
}

/* Calendar compact labels and balanced navigation v124 */
.appointments-calendar-nav,
.appointments-calendar-nav.week-mode {
    gap: 4px;
    margin-left: 8px;
}
.appointments-calendar-nav .appointments-month-label,
.appointments-calendar-nav.week-mode .appointments-month-label {
    min-width: 0;
    width: auto;
    margin: 0 9px;
}
.appointments-calendar-nav.week-mode .appointments-nav-button.week-nav {
    min-width: 25px;
    padding-left: 1px;
    padding-right: 1px;
    letter-spacing: 0;
}
.appointment-calendar-day-number,
.appointments-calendar-grid.month-view .appointment-calendar-day-number,
.appointments-calendar-grid.month-view .appointment-calendar-day-number::after {
    font-size: 11px !important;
}
@media (max-width: 980px) {
    .appointments-calendar-panel.week-view-scroll .appointment-calendar-day {
        min-height: 96px !important;
    }
    .appointments-calendar-panel.week-view-scroll .appointment-calendar-day::before {
        content: attr(data-weekday-label);
        font-size: 12px !important;
    }
}
@media (max-width: 520px) {
    .appointments-calendar-panel.week-view-scroll .appointment-calendar-day {
        min-height: 96px !important;
    }
}

/* Body-level ToDoList category suggestions v137 */
.category-suggestion-list.category-suggestion-portal {
    position: fixed !important;
    z-index: 100000 !important;
    box-sizing: border-box;
}

/* Terms and Conditions popup v137 */
.terms-dialog {
    width: min(680px, calc(100vw - 28px));
    max-height: calc(100dvh - 28px);
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #ccc;
    padding: 0;
    overflow: visible;
}
.terms-dialog::backdrop {
    background: rgba(8, 8, 8, .78);
    backdrop-filter: blur(4px);
}
.terms-dialog-card {
    max-height: calc(100dvh - 28px);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    box-sizing: border-box;
    border: 1px solid rgba(0, 255, 255, .30);
    border-radius: 8px;
    background: #222;
    box-shadow: 0 18px 70px rgba(0, 0, 0, .72), 0 0 24px rgba(0, 255, 255, .08);
    font-family: var(--upunkt-ui-font, "Segoe UI", Arial, sans-serif);
}
.terms-dialog-header {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 18px 18px 12px 22px;
}
.terms-dialog-header h1 {
    margin: 0;
    color: #0ff;
    font-family: var(--upunkt-display-font, "Segoe UI", Arial, sans-serif);
    font-size: 19px;
    font-weight: 500;
    text-align: left;
}
.terms-dialog-close-icon {
    width: 32px;
    height: 32px;
    border: 0;
    background: transparent;
    color: #aaa;
    font-size: 25px;
    line-height: 1;
    cursor: pointer;
}
.terms-dialog-close-icon:hover,
.terms-dialog-close-icon:focus-visible {
    color: #0ff;
    outline: none;
    text-shadow: 0 0 9px rgba(0,255,255,.55);
}
.terms-dialog-content {
    overflow-y: auto;
    padding: 0 22px 8px;
    font-size: 14px;
    line-height: 1.48;
}
.terms-dialog-content p { margin: 0 0 14px; }
.terms-dialog-actions {
    display: flex;
    justify-content: flex-end;
    padding: 12px 22px 20px;
}
.terms-dialog-delete-form {
    margin-top: 18px;
    padding-top: 15px;
    border-top: 1px solid #3b3b3b;
}
@media (max-width: 520px) {
    .terms-dialog {
        width: calc(100vw - 14px);
        max-height: calc(100dvh - 14px);
    }
    .terms-dialog-card { max-height: calc(100dvh - 14px); }
    .terms-dialog-header { padding: 15px 13px 10px 16px; }
    .terms-dialog-content { padding: 0 16px 6px; font-size: 13px; }
    .terms-dialog-actions { padding: 10px 16px 16px; }
}

/* Authenticated-user Terms and Conditions v109 */
body.disclaimer-pending {
    overflow: hidden;
}
.disclaimer-gate {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: grid;
    place-items: center;
    padding: 18px;
    overflow-y: auto;
    background: rgba(12, 12, 12, .96);
    backdrop-filter: blur(5px);
}
.disclaimer-gate.accepted {
    display: none;
}
.disclaimer-card {
    width: min(680px, calc(100vw - 28px));
    max-height: calc(100dvh - 36px);
    overflow-y: auto;
    box-sizing: border-box;
    border: 1px solid rgba(0, 255, 255, .30);
    border-radius: 8px;
    background: #222;
    color: #ccc;
    padding: 22px 24px 24px;
    font-family: var(--upunkt-ui-font, "Segoe UI", Arial, sans-serif);
    box-shadow: 0 18px 70px rgba(0, 0, 0, .72), 0 0 24px rgba(0, 255, 255, .08);
}
.disclaimer-brand {
    margin-bottom: 14px;
    color: #0ff;
    font-family: var(--upunkt-display-font, "Segoe UI", Arial, sans-serif);
    font-size: 23px;
    letter-spacing: .035em;
    text-align: center;
    text-shadow: 0 0 8px rgba(0, 255, 255, .18);
}
.disclaimer-card h1 {
    margin: 0 0 12px;
    color: #0ff;
    font-family: var(--upunkt-display-font, "Segoe UI", Arial, sans-serif);
    font-size: 19px;
    font-weight: 500;
    line-height: 1.25;
    text-align: center;
}
.disclaimer-card p,
.disclaimer-card li,
.disclaimer-consent {
    font-size: 14px;
    line-height: 1.48;
}
.disclaimer-card p {
    margin: 0 0 12px;
}
.disclaimer-list {
    margin: 0 0 16px;
    padding-left: 21px;
}
.disclaimer-list li {
    margin: 0 0 8px;
}
.disclaimer-consent {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 9px;
    align-items: start;
    margin: 18px 0 12px;
    color: #ddd;
    cursor: pointer;
    font-weight: 400;
}
.disclaimer-consent input {
    width: 16px;
    height: 16px;
    margin: 3px 0 0;
    accent-color: #0ff;
}
.disclaimer-message {
    min-height: 18px;
    margin: 0 0 7px !important;
    color: #ffad3d;
    text-align: center;
}
.disclaimer-accept {
    display: block;
    min-width: 170px;
    margin: 0 auto;
    border: 1px solid rgba(0, 255, 255, .52);
    border-radius: 4px;
    background: transparent;
    color: #0ff;
    padding: 8px 16px;
    font: 500 14px/1.2 var(--upunkt-ui-font, "Segoe UI", Arial, sans-serif);
    cursor: pointer;
    text-shadow: 0 0 7px rgba(0, 255, 255, .22);
}
.disclaimer-accept:hover:not(:disabled),
.disclaimer-accept:focus-visible:not(:disabled) {
    outline: none;
    background: rgba(0, 255, 255, .055);
    border-color: #0ff;
    box-shadow: 0 0 12px rgba(0, 255, 255, .13);
}
.disclaimer-accept:disabled {
    color: #666;
    border-color: #4c4c4c;
    cursor: not-allowed;
    text-shadow: none;
}
.settings-action-row {
    margin: 14px 0;
}
@media (max-width: 520px) {
    .disclaimer-gate {
        padding: 7px;
    }
    .disclaimer-card {
        width: calc(100vw - 14px);
        max-height: calc(100dvh - 14px);
        padding: 17px 15px 19px;
    }
    .disclaimer-card h1 {
        font-size: 17px;
    }
    .disclaimer-card p,
    .disclaimer-card li,
    .disclaimer-consent {
        font-size: 13px;
    }
    .disclaimer-accept {
        width: 100%;
    }
}


/* Terms page and horizontal week layout v110 */
.appointments-calendar-panel.week-view-scroll {
    overflow-x: hidden;
    overflow-y: visible;
}
.appointments-calendar-panel.week-view-scroll .appointments-weekdays.week-view {
    display: none !important;
}
.appointments-calendar-panel.week-view-scroll .appointments-calendar-grid.week-view {
    display: grid !important;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr) !important;
}
.appointments-calendar-panel.week-view-scroll .appointment-calendar-day {
    min-width: 0;
    min-height: 96px !important;
    padding: 8px 10px;
}
.appointments-calendar-panel.week-view-scroll .appointment-calendar-day::before {
    content: attr(data-weekday-label);
    display: block !important;
    margin: 0 0 7px;
    color: #0ff;
    font-family: var(--upunkt-display-font);
    font-size: 12px !important;
    line-height: 1.2;
    text-shadow: 0 0 6px rgba(0,255,255,.18);
}
.appointments-calendar-panel.week-view-scroll .appointment-calendar-day.today::before {
    color: #ffad3d;
    text-shadow: 0 0 7px rgba(255,145,0,.30);
}
.appointments-calendar-panel.week-view-scroll .appointment-calendar-day-number {
    display: none !important;
}
.appointments-calendar-panel.week-view-scroll .appointment-calendar-event {
    font-size: 11px !important;
    line-height: 1.25;
    white-space: normal;
}













.registration-check {
    display: grid;
    gap: 5px;
    margin-top: 5px;
    padding-top: 8px;
    border-top: 1px solid rgba(0,255,255,.12);
}
.registration-check label {
    color: #aaa;
    font-size: 12px;
    font-weight: normal;
}
.robot-check {
    margin-top: 4px;
}
.robot-check[hidden] {
    display: none !important;
}
.robot-check-label {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 38px;
    padding: 7px 10px;
    border: 1px solid rgba(0,255,255,.28);
    background: rgba(0,255,255,.025);
    color: #ccc;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: normal;
    cursor: pointer;
}
.robot-check-label:hover {
    border-color: rgba(0,255,255,.52);
    color: #0ff;
}
.robot-check-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: #00ffff;
    cursor: pointer;
}
.registration-honeypot {
    position: absolute !important;
    left: -10000px !important;
    top: auto !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

.upunkt-footer {
    width: 100%;
    margin: 34px auto 10px;
    padding: 8px 0 2px;
    text-align: center;
}
.upunkt-version {
    color: rgba(207,255,255,.34);
    font-family: "Segoe UI Variable Text", "Aptos", "Inter", "Helvetica Neue", Arial, sans-serif;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .08em;
}

/* v116: one menu, exactly two layouts. No intermediate states. */
.upunkt-header {
    padding-top: 22px;
    padding-bottom: 6px;
}
.top-shell {
    display: flex;
    width: 100%;
    margin: 0 auto 18px;
    padding: 0;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.main-tabs {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    width: max-content;
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    gap: 15px;
}
.main-tabs > * {
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    margin: 0;
}
.brand-lockup,
.brand-lockup:hover,
.brand-lockup:visited,
.main-tabs .tab-button,
.main-tabs a.tab-button,
.main-tabs button.tab-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    margin: 0;
    padding: 5px 2px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    clip-path: none;
    color: #cfffff;
    font-family: "Segoe UI Variable Text", "Aptos", "Inter", "Helvetica Neue", Arial, sans-serif;
    font-size: 11px;
    font-weight: 650;
    line-height: 1;
    letter-spacing: .105em;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    text-shadow: 0 0 7px rgba(0,255,255,.20);
    white-space: nowrap;
    overflow: visible;
    transform: none;
    transition: none;
}
.brand-lockup {
    position: static;
    isolation: auto;
}
.brand-lockup::before,
.brand-lockup::after,
.main-tabs .tab-button::before,
.main-tabs a.tab-button::before,
.main-tabs button.tab-button::before,
.main-tabs .tab-button::after,
.main-tabs a.tab-button::after,
.main-tabs button.tab-button::after {
    display: none;
    content: none;
}
.brand-lockup:hover,
.brand-lockup:focus-visible,
.main-tabs .tab-button:hover,
.main-tabs a.tab-button:hover,
.main-tabs button.tab-button:hover,
.main-tabs .tab-button:focus-visible,
.main-tabs a.tab-button:focus-visible,
.main-tabs button.tab-button:focus-visible {
    outline: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: #fff;
    transform: none;
    text-shadow: 0 0 10px rgba(0,255,255,.62);
}
.upunkt-logo-mark {
    display: none;
}
.upunkt-wordmark {
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    width: auto;
    color: #0ff;
    font-family: "Segoe UI Variable Display", "Aptos Display", "Inter", "Helvetica Neue", Arial, sans-serif;
    font-size: 20px;
    font-weight: 650;
    line-height: 1;
    letter-spacing: .085em;
    text-align: center;
    text-transform: none;
    white-space: nowrap;
}
.upunkt-letter-dot {
    display: inline-block;
    margin: 0 .015em;
    color: #0ff;
    font-size: .72em;
    line-height: 1;
    vertical-align: .09em;
    text-shadow: 0 0 8px rgba(0,255,255,.55);
    transform: translateY(-.02em);
}
.menu-dropdown,
.profile-dropdown {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 0;
    margin: 0;
}
.main-tabs .dropdown-toggle {
    display: inline-flex;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.menu-panel {
    display: none;
    position: absolute;
    z-index: 30;
    top: calc(100% + 8px);
    left: 50%;
    right: auto;
    width: max-content;
    min-width: 170px;
    max-width: min(280px, calc(100vw - 30px));
    padding: 6px;
    border: 1px solid rgba(0,255,255,.24);
    border-radius: 4px;
    background: rgba(19,25,25,.98);
    box-shadow: 0 12px 30px rgba(0,0,0,.45), 0 0 18px rgba(0,255,255,.10);
    transform: translateX(-50%);
    text-align: left;
}
.menu-panel.open {
    display: block;
}
.menu-panel-link,
.menu-panel-link:hover,
.menu-panel-link:visited {
    display: block;
    padding: 6px 9px;
    color: #ccc;
    font-family: "Segoe UI Variable Text", "Aptos", "Inter", "Helvetica Neue", Arial, sans-serif;
    font-size: 12px;
    font-weight: 560;
    line-height: 1.2;
    letter-spacing: .04em;
    text-decoration: none;
}
.menu-panel-link:hover {
    color: #0ff;
    background: #2b2b2b;
    text-shadow: 0 0 10px rgba(0,255,255,.30);
}

/* Horizontal state. */
@media (min-width: 521px) {
    .main-tabs {
        flex-direction: row;
    }
}

/* Stacked state. Only flex direction and spacing change. */
@media (max-width: 520px) {
    .main-tabs {
        flex-direction: column;
        gap: 0;
    }
    .main-tabs .dropdown-toggle {
        max-width: calc(100vw - 30px);
    }
}

/* v118: move the complete Upunkt menu item slightly upward, not the star. */
.main-tabs > .brand-lockup {
    position: relative;
    top: -1px;
}
.upunkt-letter-dot {
    transform: translateY(-.02em) !important;
}

/* The Google search bar has exactly the same two responsive states as the menu. */
.google-search-form {
    width: 100% !important;
    margin: 8px auto 0 !important;
}
.google-search-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: stretch !important;
    width: min(90%, 500px) !important;
    height: 27px !important;
    min-height: 27px !important;
    margin: 0 auto !important;
    gap: 5px !important;
}
.google-search-row input[type="text"],
.google-search-row input[type="submit"] {
    box-sizing: border-box !important;
    width: auto !important;
    min-width: 0 !important;
    height: 27px !important;
    min-height: 27px !important;
    max-height: 27px !important;
    margin: 0 !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    line-height: 1 !important;
}
.google-search-row input[type="text"] {
    width: 100% !important;
    max-width: none !important;
}
.google-search-row input[type="submit"] {
    width: auto !important;
    white-space: nowrap !important;
}

.links-country-trigger {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--link-color, #a9a9a9);
    font: inherit;
    font-size: .86em;
    padding: 0;
    cursor: pointer;
}
.links-country-trigger:hover,
.links-country-trigger:focus-visible {
    color: #d7d7d7;
    outline: none;
}
.country-picker-dialog {
    width: min(920px, calc(100vw - 36px));
    max-height: min(780px, calc(100vh - 50px));
    padding: 0;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 12px;
    background: #111417;
    color: #d9dde1;
    box-shadow: 0 20px 70px rgba(0,0,0,.55);
}
.country-picker-dialog::backdrop { background: rgba(0,0,0,.62); }
.country-picker-shell { padding: 20px; }
.country-picker-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:14px; }
.country-picker-heading h1 { margin:0; font-size:1.25rem; font-weight:500; }
.country-picker-close { border:0; background:transparent; color:#8f969c; font-size:24px; line-height:1; cursor:pointer; padding:2px 5px; }
.country-filter-input {
    box-sizing:border-box;
    width:100%;
    margin:0 0 16px;
    padding:10px 12px;
    border:1px solid rgba(255,255,255,.14);
    border-radius:7px;
    background:#0c0f11;
    color:#e3e6e8;
    font:inherit;
}
.country-filter-input:focus { outline:1px solid rgba(111,164,205,.58); border-color:rgba(111,164,205,.58); }
.country-picker-list {
    display:grid;
    grid-template-columns:repeat(4, minmax(0,1fr));
    gap:6px 10px;
    max-height:560px;
    overflow:auto;
    padding-right:5px;
}
.country-choice {
    min-width:0;
    border:0;
    border-radius:6px;
    background:transparent;
    color:#b9bec3;
    text-align:left;
    padding:7px 9px;
    font:inherit;
    cursor:pointer;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.country-choice:hover, .country-choice:focus-visible { background:rgba(255,255,255,.07); color:#fff; outline:none; }
.country-choice.selected { background:rgba(92,142,181,.16); color:#9fc7e6; }
@media (max-width:760px) { .country-picker-list { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:430px) { .country-picker-list { grid-template-columns:1fr; } }

#linksRoot {
    margin-top: 14px;
    padding-bottom: 68px;
}
#linksRoot .category-title-row {
    margin-top: 12px;
}
#linksRoot .category-title-row:first-child {
    margin-top: 0;
}
#linksRoot .category-title-row h1 {
    font-family: var(--upunkt-ui-font, "Segoe UI Variable Text", "Aptos", "Inter", "Helvetica Neue", Arial, sans-serif) !important;
}

@media (max-width: 520px) {
    .google-search-form {
        margin-top: 10px !important;
    }
    .google-search-row {
        grid-template-columns: minmax(0, 1fr) auto !important;
        width: min(92%, 500px) !important;
        height: 30px !important;
        min-height: 30px !important;
    }
    .google-search-row input[type="text"],
    .google-search-row input[type="submit"] {
        height: 30px !important;
        min-height: 30px !important;
        max-height: 30px !important;
    }
    #linksRoot {
        margin-top: 16px;
        padding-bottom: 72px;
    }
    #linksRoot .category-title-row {
        margin-top: 14px;
    }
    #linksRoot .category-title-row:first-child {
        margin-top: 0;
    }
}

/* v120 account creation flow */
.registration-stage,
.login-password-stage {
    display: grid;
    gap: 9px;
}
.registration-stage[hidden],
.login-password-stage[hidden],
#savePasswordStage[hidden],
#memorPasswordStage[hidden],
#appointmentPasswordStage[hidden],
#saveConfirmPasswordWrap[hidden],
#loginConfirmPasswordWrap[hidden],
#memorConfirmPasswordWrap[hidden],
#appointmentConfirmPasswordWrap[hidden] {
    display: none !important;
}

/* Keep password fields visually aligned as full-width rows. */
#savePasswordStage,
#memorPasswordStage,
#appointmentPasswordStage,
#saveConfirmPasswordWrap,
#memorConfirmPasswordWrap,
#appointmentConfirmPasswordWrap,
#loginConfirmPasswordWrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    width: 100%;
}
#savePasswordStage > label,
#memorPasswordStage > label,
#appointmentPasswordStage > label,
#saveConfirmPasswordWrap > label,
#memorConfirmPasswordWrap > label,
#appointmentConfirmPasswordWrap > label,
#loginConfirmPasswordWrap > label {
    display: block;
}
#savePasswordStage .input,
#memorPasswordStage .input,
#appointmentPasswordStage .input,
#loginPasswordStage .input {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}
.registration-terms-check {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 38px;
    padding: 7px 10px;
    border: 1px solid rgba(0,255,255,.28);
    background: rgba(0,255,255,.025);
    color: #ccc;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: normal;
    line-height: 1.25;
    cursor: pointer;
}
.registration-terms-check:hover {
    border-color: rgba(0,255,255,.52);
    color: #0ff;
}
.registration-terms-check input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
    flex: 0 0 auto;
    accent-color: #00ffff;
    cursor: pointer;
}


/* Appointment categories, search and compact density v145 — final override */
.appointments-toolbar {
    gap: 14px;
    min-height: 26px;
    margin-bottom: 8px;
    padding-bottom: 6px;
}
.appointments-table tbody tr.appointment-list-row {
    line-height: 1.15;
}
.appointment-calendar-day {
    min-height: 88px;
    padding: 4px;
}
.appointment-calendar-day-number {
    margin-bottom: 4px;
}
.appointment-calendar-event {
    margin: 1px 0;
    padding-top: 2px;
    padding-bottom: 2px;
}
@media (max-width: 1050px) {
    .appointments-table tbody tr.appointment-list-row {
        margin-bottom: 5px;
        padding-top: 6px;
        padding-bottom: 6px;
    }
}
@media (max-width: 700px) {
    .appointments-search-input {
        width: min(180px, 46vw);
    }
    .appointments-calendar-grid.month-view .appointment-calendar-day {
        min-height: 76px !important;
    }
    .appointments-calendar-grid.month-view .appointment-calendar-week-number {
        min-height: 152px !important;
    }
}
@media (max-width: 430px) {
    .appointments-search-input {
        order: 20;
        width: 100%;
        margin-left: 0;
    }
    .appointments-calendar-grid.month-view .appointment-calendar-day {
        min-height: 72px !important;
    }
    .appointments-calendar-grid.month-view .appointment-calendar-week-number {
        min-height: 144px !important;
    }
}

/* Appointment list headings, per-column filters and inline editing v146 */
.appointments-table thead th {
    padding: 2px 7px 4px;
}
.appointments-list-heading {
    appearance: none;
    border: 0;
    background: transparent;
    color: #8fa3a3;
    padding: 0;
    font: inherit;
    font-size: 11px;
    font-weight: 520;
    letter-spacing: .045em;
    cursor: pointer;
    text-align: left;
    transition: color .15s ease, text-shadow .15s ease;
}
.appointments-list-heading:hover,
.appointments-list-heading.filter-active-heading {
    color: #0ff;
    text-shadow: 0 0 7px rgba(0,255,255,.22);
}
.appointments-list-heading.filter-active-heading::after {
    content: " •";
    color: #0ff;
}
.appointments-column-filter-panel {
    position: fixed;
    z-index: 16000;
    width: 250px;
    max-height: min(420px, 72vh);
    overflow: auto;
}
.appointments-column-filter-title {
    color: #0ff;
    font-size: 12px;
    margin-bottom: 7px;
    letter-spacing: .04em;
}
.appointments-column-filter-body {
    display: grid;
    gap: 5px;
}
.appointment-column-filter-input {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid rgba(0,255,255,.20);
    border-radius: 5px;
    background: rgba(0,0,0,.18);
    color: #ddd;
    padding: 6px 7px;
    outline: none;
    font: inherit;
    font-size: 12px;
}
.appointment-column-filter-input:focus {
    border-color: rgba(0,255,255,.55);
    box-shadow: 0 0 7px rgba(0,255,255,.12);
}
.appointments-table th:nth-child(1) { width: 126px; }
.appointments-table th:nth-child(2) { width: 108px; }
.appointments-table th:nth-child(3) { width: 100px; }
.appointments-table th:nth-child(4) { width: 108px; }
.appointments-table th:nth-child(5) { width: 112px; }
.appointments-table th:nth-child(7) { width: 126px; }
.appointments-table th:nth-child(8) { width: 66px; text-align: center; }
.appointment-action-cell {
    white-space: nowrap;
}
.appointment-row-edit,
.appointment-inline-save {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid rgba(0,255,255,.22);
    background: transparent;
    color: rgba(0,255,255,.62);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0 2px;
    cursor: pointer;
    font-family: Arial, sans-serif;
    line-height: 1;
}
.appointment-row-edit:hover,
.appointment-inline-save:hover {
    color: #0ff;
    border-color: rgba(0,255,255,.60);
    box-shadow: 0 0 8px rgba(0,255,255,.14);
}
.appointment-inline-editing td {
    overflow: visible !important;
}
.appointment-inline-input {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    border: 0;
    border-bottom: 1px solid rgba(0,255,255,.28);
    background: rgba(0,0,0,.14);
    color: #ddd;
    padding: 3px 4px;
    outline: none;
    font: inherit;
    font-size: 12px;
}
.appointment-inline-input:focus {
    border-bottom-color: #0ff;
    box-shadow: 0 3px 5px -4px rgba(0,255,255,.7);
}
.appointment-inline-duration {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 2px;
}
.appointment-inline-duration-part {
    display: grid;
    grid-template-rows: auto auto;
    gap: 1px;
    min-width: 0;
}
.appointment-inline-duration-part > span {
    color: #738383;
    font-size: 8px;
    line-height: 1;
    text-align: center;
}
.appointment-inline-duration-input {
    text-align: center;
    padding-left: 1px;
    padding-right: 1px;
}
.appointment-inline-cancel {
    margin-left: 2px;
}
@media (max-width: 1050px) {
    .appointments-table thead { display: none; }
    .appointment-inline-editing .appointment-inline-duration { min-width: 130px; }
}


/* Editable appointment table + persistent column layout v147 */
.appointments-table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: visible;
}
.appointments-table thead th {
    position: relative;
    overflow: visible;
}
.appointment-col-resizer {
    position: absolute;
    top: 0;
    right: -5px;
    width: 10px;
    height: 100%;
    cursor: col-resize;
    z-index: 8;
    touch-action: none;
}
.appointment-col-resizer-left { left: -5px; right: auto; }
.appointment-col-resizer-right { right: -5px; }
.appointment-col-resizer-outer { z-index: 12; }
.appointment-col-resizer-outer::after {
    background: rgba(0,255,255,.34);
    box-shadow: 0 0 6px rgba(0,255,255,.14);
}
.appointment-col-resizer::after {
    content: "";
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 4px;
    width: 1px;
    background: rgba(0,255,255,.28);
    box-shadow: 0 0 5px rgba(0,255,255,.10);
    transition: background .15s ease, box-shadow .15s ease, width .15s ease;
}
.appointment-col-resizer:hover::after,
.appointment-col-resizer.active::after {
    width: 2px;
    background: rgba(0,255,255,.82);
    box-shadow: 0 0 8px rgba(0,255,255,.28);
}
body.appointment-column-resizing,
body.appointment-column-resizing * {
    cursor: col-resize !important;
    user-select: none !important;
}
.appointments-table col[data-col-key="action"] { width: 62px; }
@media (min-width: 1051px) {
    .appointments-table {
        table-layout: fixed;
    }
    .appointments-table th,
    .appointments-table td {
        overflow: hidden;
        text-overflow: clip;
        white-space: nowrap;
    }
    .appointments-list-heading,
    .appointment-list-editable-text {
        overflow: hidden;
        text-overflow: clip;
        white-space: nowrap;
    }
}
.appointments-table tbody tr.appointment-list-row { cursor: default; }
.appointment-editable-cell { cursor: text; }
.appointment-editable-cell:hover {
    background: rgba(0,255,255,.052) !important;
    color: #e8ffff !important;
    text-shadow: 0 0 6px rgba(0,255,255,.12);
}
.appointment-inline-editing .appointment-editable-cell { cursor: default; }
.appointment-inline-editing td {
    background: rgba(0,255,255,.025) !important;
}
.appointment-row-edit {
    font-size: 13px;
}
.appointment-row-edit::after { content: none; }
@media (max-width: 1050px) {
    .appointment-col-resizer { display: none; }
    .appointments-table col { width: auto !important; }
    .appointments-table col[data-col-key="action"] { width: auto !important; }
}


/* ToDoList refinements v154: resize handles on every column boundary.
   Keep the original subtle cyan-grey handle styling. */
.todo-col-resizer-divider::after {
    width: 1px;
    background: rgba(0,255,255,.32);
    box-shadow: 0 0 6px rgba(0,255,255,.20);
}
.todo-col-resizer-divider:hover::after,
.todo-col-resizer-divider.active::after {
    width: 2px;
    background: rgba(0,255,255,.92);
    box-shadow: 0 0 12px rgba(0,255,255,.55);
}
.new-memory-row .memor-input {
    background: #12171d;
    color: #d9e5eb;
    border-color: #33414a;
}
.new-memory-row .memor-input:focus {
    background: #151d24;
    color: #effbff;
    border-color: rgba(42, 153, 255, .75);
    box-shadow: 0 0 0 1px rgba(42, 153, 255, .10);
}
.new-memory-row .memor-input::placeholder {
    color: #71808a;
    opacity: 1;
}
.todo-status-text-display {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    width: 100%;
}
.todo-status-text-value {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.todo-status-text-value[contenteditable="true"] {
    outline: none;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: inherit;
    padding: 0;
    margin: 0;
    text-decoration: none;
}
.todo-status-history-button {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    border: 1px solid rgba(145, 153, 160, .56);
    border-radius: 50%;
    background: rgba(120, 128, 136, .08);
    color: #8f989f;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: Arial, sans-serif;
    font-size: 8px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    text-decoration: none !important;
    opacity: .82;
    transition: border-color .15s ease, color .15s ease, background .15s ease, opacity .15s ease;
}
.todo-status-history-button:hover,
.todo-status-history-button:focus-visible {
    color: #c4c9cd;
    border-color: rgba(176, 184, 190, .76);
    background: rgba(150, 158, 165, .12);
    opacity: 1;
    box-shadow: none;
    outline: none;
}
.task-row-done .todo-status-history-button {
    text-decoration: none !important;
    color: #737d84;
    border-color: rgba(112, 122, 130, .46);
    opacity: .68;
}
.todo-status-history-dialog {
    width: min(560px, calc(100vw - 28px));
    max-height: min(70vh, 620px);
    padding: 0;
    overflow: hidden;
}
.todo-status-history-shell {
    background: #171a1e;
    color: #d3d7da;
    border: 1px solid rgba(42, 153, 255, .24);
    padding: 14px;
    box-sizing: border-box;
}
.todo-status-history-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}
.todo-status-history-header h1 {
    margin: 0;
    color: #d8e8f4;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: .025em;
}
.todo-status-history-close {
    width: 23px;
    height: 23px;
    border-color: rgba(42, 153, 255, .38);
    color: #7ebeff;
}
.todo-status-history-list {
    display: grid;
    gap: 0;
    max-height: min(54vh, 470px);
    overflow-y: auto;
    border-top: 1px solid rgba(42, 153, 255, .18);
}
.todo-status-history-row {
    display: grid;
    grid-template-columns: minmax(150px, .38fr) minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 7px 4px;
    border-bottom: 1px solid #2a3036;
}
.todo-status-history-time {
    color: #8296a5;
    font-size: 11px;
    white-space: nowrap;
    cursor: text;
}
.todo-status-history-value {
    color: #d7dde1;
    font-size: 12px;
    overflow-wrap: anywhere;
    cursor: text;
}
.todo-status-history-time[contenteditable="true"],
.todo-status-history-value[contenteditable="true"] {
    outline: none;
    border: 0;
    background: transparent;
    box-shadow: none;
    padding: 0;
    margin: 0;
    text-decoration: none;
}
.todo-status-history-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
}
.todo-status-history-action-button {
    width: 18px;
    height: 18px;
    min-width: 18px;
    padding: 0;
    border: 1px solid #46515a;
    border-radius: 50%;
    background: #252b30;
    color: #8f9aa2;
    font: inherit;
    font-size: 10px;
    line-height: 16px;
    text-align: center;
    cursor: pointer;
}
.todo-status-history-action-button:hover,
.todo-status-history-action-button:focus-visible {
    border-color: #66747e;
    color: #d5dadd;
    background: #2d3439;
    outline: none;
}
.todo-status-history-delete-button:hover,
.todo-status-history-delete-button:focus-visible {
    border-color: #875050;
    color: #d79a9a;
}
.todo-status-history-empty {
    padding: 14px 4px;
    color: #79858d;
    font-size: 12px;
}
@media (max-width: 520px) {
    .todo-status-history-row {
        grid-template-columns: 1fr auto;
        gap: 4px 8px;
    }
    .todo-status-history-time {
        grid-column: 1 / 2;
    }
    .todo-status-history-value {
        grid-column: 1 / 2;
    }
    .todo-status-history-actions {
        grid-column: 2 / 3;
        grid-row: 1 / span 2;
    }
}


/* ToDoList refinements v158: unrestricted independent column widths.
   Narrow columns clip their content instead of wrapping/stacking it. */
.todolist-grid-table th[data-col-key] {
    white-space: nowrap;
}
.todolist-grid-table th[data-col-key] > :not(.todo-col-resizer) {
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: clip;
}
.todolist-grid-table td {
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: clip;
}
.todolist-grid-table .editable-task-cell,
.todolist-grid-table .todo-status-text-value,
.todolist-grid-table .new-memory-row .memor-input,
.todolist-grid-table .new-memory-row .table-input {
    min-width: 0 !important;
    max-width: 100%;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: clip;
    box-sizing: border-box;
}
.todolist-grid-table .todo-status-text-display {
    min-width: 0;
    overflow: hidden;
    flex-wrap: nowrap;
}

/* ToDoList refinements v167: the new-task row should look like ordinary table
   text until the user clicks it. Editing is intentionally visually neutral. */
.todolist-grid-table .new-memory-row .memor-input,
.todolist-grid-table .new-memory-row .table-input,
.todolist-grid-table .new-memory-row .memor-input:focus,
.todolist-grid-table .new-memory-row .table-input:focus {
    width: 100%;
    min-width: 0 !important;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 !important;
    border-radius: 0;
    outline: 0;
    background: transparent !important;
    color: #cccccc;
    box-shadow: none !important;
    font: inherit;
    line-height: inherit;
}
.todolist-grid-table .new-memory-row .memor-input::placeholder {
    color: transparent;
}

/* Calendar list refinements v168: direct text editing like ToDoList.
   Clicking places the caret; double-click selects the whole field. Editing must
   remain visually identical to ordinary table text. */
.appointments-table .appointment-editable-cell:hover {
    background: inherit !important;
    color: inherit !important;
    text-shadow: none !important;
}
.appointment-list-editable-text {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: clip;
    cursor: text;
}
.appointment-list-editable-text[contenteditable="true"] {
    outline: none;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: inherit;
    padding: 0;
    margin: 0;
    text-decoration: none;
    caret-color: currentColor;
}
.appointment-list-recurring-mark {
    color: inherit;
    pointer-events: none;
}

/* Daily recurring appointment continuity v177.
   Duration figures keep their original position. The series rail is an
   absolute overlay on the right side of the Duration cell, now full-height
   for every visible occurrence and now crisp rather than blurred. Its two
   alternating tones are derived from the user's selected calendar color:
   one mixed toward white and one toward black. Calendar series use the same
   tone as a full-width rail with no endpoint dot. Days from adjacent months
   use the same visual strength as days in the active month. */
.appointment-list-daily-series-duration-cell {
    position: relative;
}
.appointment-duration-series-rail {
    position: absolute;
    right: 6px;
    top: -2px;
    bottom: -2px;
    width: 6px;
    border-radius: 5px;
    background: var(--daily-series-color, rgba(111,152,155,.92));
    box-shadow: none;
    pointer-events: none;
}
.appointment-calendar-daily-series {
    position: relative;
    padding-bottom: 7px !important;
}
.appointment-calendar-daily-series::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 1px;
    height: 4px;
    border-radius: 3px;
    background: var(--daily-series-color, rgba(111,152,155,.92));
    box-shadow: none;
    pointer-events: none;
}

/* v177: adjacent-month days are full-strength, not dimmed. */
.appointment-calendar-day.outside {
    opacity: 1;
}