*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{

    background:var(--bg);
    color:var(--text);

    font-family:Segoe UI,Arial,sans-serif;

    padding:20px;
}

.captureScreen{

    min-height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:24px;

    background:
        radial-gradient(ellipse 80% 70% at 50% 0%, var(--glow), transparent 55%),
        linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg) 100%);
}

.captureScreen[hidden]{

    display:none !important;
}

.captureCard{

    width:min(440px, 100%);

    padding:28px 24px 22px;

    border:1px solid var(--border);

    border-radius:16px;

    background:var(--bg-chip);

    box-shadow:0 18px 48px var(--shadow);
}

.captureActions{

    display:flex;

    justify-content:flex-end;

    gap:10px;

    margin-top:6px;
}

.captureActions .secondary{

    padding:12px 14px;

    border:none;

    border-radius:8px;

    font-size:15px;

    font-weight:600;

    cursor:pointer;

    color:var(--text);
}

.captureActions button[type="submit"]{

    margin-top:0;
}

.captureCloseHint{

    margin:12px 0 0;

    text-align:center;

    font-size:14px;

    color:var(--text-quiet);
}

.authForm select{

    width:100%;

    background:var(--bg);

    color:var(--text);

    border:1px solid var(--border-input);

    border-radius:8px;

    padding:12px;

    font-size:16px;
}

.authForm select:focus{

    outline:none;

    border-color:var(--accent);
}

body[data-capture-page="add"]{

    padding:0;

    min-height:100vh;
}

#appShell[hidden],
#authScreen[hidden]{

    display:none !important;
}

.authScreen{

    min-height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:24px;

    background:
        radial-gradient(ellipse 80% 70% at 50% 0%, var(--glow), transparent 55%),
        linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg) 100%);
}

.authCard{

    width:min(440px, 100%);

    padding:28px 24px 22px;

    border:1px solid var(--border);

    border-radius:16px;

    background:var(--bg-chip);

    box-shadow:0 18px 48px var(--shadow);
}

.authBrand{

    margin:0 0 8px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    font-family:"Outfit",Segoe UI,sans-serif;

    font-size:1.8rem;

    font-weight:700;

    letter-spacing:0.02em;

    color:var(--text);

    text-align:center;
}

.authBrandMark{

    width:36px;

    height:36px;

    flex-shrink:0;

    display:block;

    overflow:visible;
}

.railBrand,
.aboutBrand{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    flex:0 0 auto;

    font-family:"Outfit",Segoe UI,sans-serif;

    font-weight:700;

    letter-spacing:0.02em;

    line-height:1.1;

    color:var(--text);
}

.railBrand{

    width:100%;

    padding:6px 4px 8px;

    font-size:1.35rem;

    gap:10px;
}

.railBrand .authBrandMark{

    width:40px;

    height:40px;
}

.aboutBrand{

    margin:0 0 12px;

    font-size:1.35rem;
}

.aboutBrand .authBrandMark{

    width:32px;

    height:32px;
}

.authBrandWordmark{

    line-height:1.1;
}

.brandPosidata{

    color:var(--text);
}

.brandDot{

    color:var(--text-dim);
}

.brandHub{

    color:var(--accent);
}

@media (max-width:420px){

    .authBrand{

        font-size:1.45rem;

        gap:8px;
    }

    .authBrandMark{

        width:30px;

        height:30px;
    }

}

.authHint{

    margin:0 0 18px;

    font-size:13px;

    line-height:1.45;

    color:var(--text-quiet);

    text-align:center;
}

.authPanelTitle{

    margin:0 0 12px;

    font-family:"Outfit",Segoe UI,sans-serif;

    font-size:1.05rem;

    font-weight:650;

    color:var(--accent-soft);
}

.authError{

    margin:0 0 12px;

    padding:10px 12px;

    border-radius:8px;

    background:color-mix(in srgb, var(--warn) 14%, transparent);

    border:1px solid color-mix(in srgb, var(--warn) 40%, transparent);

    color:var(--warn);

    font-size:13px;
}

.authStep{

    display:flex;

    flex-direction:column;

    gap:10px;
}

.authStep[hidden],
.authForm[hidden]{

    display:none !important;
}

.authAccountList{

    display:flex;

    flex-direction:column;

    gap:8px;

    max-height:min(42vh, 320px);

    overflow:auto;

    margin:0 0 4px;

    padding:2px;
}

.authAccountPanel{

    display:flex;

    align-items:center;

    gap:12px;

    width:100%;

    padding:12px 14px;

    border:1px solid var(--border-input);

    border-radius:10px;

    background:var(--bg);

    color:var(--text);

    font:inherit;

    text-align:left;

    cursor:pointer;

    transition:
        border-color 0.15s ease,
        background 0.15s ease,
        transform 0.15s ease;
}

.authAccountPanel:hover,
.authAccountPanel:focus-visible{

    outline:none;

    border-color:var(--accent);

    background:color-mix(in srgb, var(--accent) 8%, var(--bg));

    transform:translateY(-1px);
}

.authAccountAvatar{

    flex:0 0 auto;

    width:40px;

    height:40px;

    display:grid;

    place-items:center;

    border-radius:10px;

    background:color-mix(in srgb, var(--accent) 18%, var(--bg-chip));

    color:var(--accent-soft);

    font-family:"Outfit",Segoe UI,sans-serif;

    font-size:1.05rem;

    font-weight:700;
}

.authAccountName{

    min-width:0;

    font-weight:600;

    font-size:15px;

    overflow:hidden;

    text-overflow:ellipsis;

    white-space:nowrap;
}

.authAccountChevron{

    margin-left:auto;

    color:var(--text-quiet);

    font-size:1.1rem;

    line-height:1;
}

.authEmptyAccounts{

    margin:4px 0 8px;

    padding:16px 12px;

    border:1px dashed var(--border);

    border-radius:10px;

    text-align:center;

    font-size:13px;

    color:var(--text-quiet);
}

.authSelectedAccount{

    margin:0 0 4px;

    padding:10px 12px;

    border-radius:8px;

    background:color-mix(in srgb, var(--accent) 10%, var(--bg));

    border:1px solid color-mix(in srgb, var(--accent) 28%, var(--border));

    font-weight:600;

    font-size:15px;

    color:var(--text);
}

.authCardWide{

    width:min(480px, 100%);
}

.authSectionLabel{

    margin:8px 0 0;

    font-family:"Outfit",Segoe UI,sans-serif;

    font-size:0.95rem;

    font-weight:650;

    color:var(--accent-soft);
}

.authFieldHelp{

    margin:0;

    font-size:12px;

    line-height:1.45;

    color:var(--text-quiet);
}

.authCheckLabel{

    display:flex;

    align-items:flex-start;

    gap:10px;

    margin:2px 0 0;

    font-size:13px;

    line-height:1.4;

    color:var(--text-muted);

    cursor:pointer;
}

.authForm .authCheckLabel input[type="checkbox"]{

    width:1.05em;

    height:1.05em;

    min-width:1.05em;

    margin:0.2em 0 0;

    padding:0;

    flex:0 0 auto;

    border:none;

    border-radius:3px;

    background:var(--bg);

    accent-color:var(--accent);

    cursor:pointer;
}

.authForm{

    display:flex;

    flex-direction:column;

    gap:10px;
}

.authForm label{

    font-size:14px;

    color:var(--text-muted);
}

.authForm input:not([type="checkbox"]){

    width:100%;

    background:var(--bg);

    color:var(--text);

    border:1px solid var(--border-input);

    border-radius:8px;

    padding:12px;

    font-size:16px;
}

.authForm input:not([type="checkbox"]):focus{

    outline:none;

    border-color:var(--accent);
}

.authForm button[type="submit"]{

    margin-top:2px;

    padding:12px 14px;

    border:none;

    border-radius:8px;

    background:var(--accent-hover);

    color:var(--on-accent);

    font-size:15px;

    font-weight:600;

    cursor:pointer;
}

.authForm button[type="submit"]:hover{

    background:var(--accent);
}

.authSwitch{

    margin:4px 0 0;

    text-align:center;

    font-size:13px;

    color:var(--text-quiet);
}

.authLinkButton{

    border:none;

    background:transparent;

    color:var(--accent-soft);

    font:inherit;

    font-weight:600;

    text-decoration:underline;

    cursor:pointer;

    padding:0;
}

a.authLinkButton{
    display:inline;
}

.authLinkButton:hover{

    color:var(--accent);
}

.authFooterNote{

    margin:16px 0 0;

    font-size:12px;

    line-height:1.4;

    color:var(--text-faint);

    text-align:center;
}

.pageLayout{

    display:grid;

    grid-template-columns:minmax(260px, 320px) minmax(0, 1fr) minmax(260px, 320px);

    gap:20px;

    max-width:1800px;

    margin:0 auto;

    align-items:start;
}

.container{

    min-width:0;
}

.newsRail{

    display:flex;

    flex-direction:column;

    gap:12px;

    position:sticky;

    top:20px;

    height:calc(100vh - 40px);

    max-height:calc(100vh - 40px);

    overflow:hidden;

    padding-right:4px;

    scrollbar-width:none;

    -ms-overflow-style:none;
}

.widgetRail{

    display:flex;

    flex-direction:column;

    gap:12px;

    position:sticky;

    top:20px;

    height:calc(100vh - 40px);

    max-height:calc(100vh - 40px);

    overflow:hidden;

    padding-right:4px;

    scrollbar-width:thin;
}

.newsRail::-webkit-scrollbar{

    display:none;
}

.newsBoard{

    background:var(--bg-panel);

    border:1px solid var(--border);

    border-radius:12px;

    overflow:hidden;

    display:flex;

    flex-direction:column;

    flex:1 1 0;

    min-height:0;
}

.newsBoard.minimized{

    flex:0 0 auto;

    max-height:none;
}

.newsBoard.minimized .newsBoardBody{

    display:none;
}

.newsBoard.dragging{

    opacity:.45;
}

.newsBoard.dragOver,
.newsRail.dragOver{

    outline:2px dashed var(--accent-bright);

    outline-offset:3px;
}

.newsDragBar{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:8px;

    height:34px;

    padding:0 8px;

    background:var(--bg-chip);

    border-bottom:1px solid var(--border);

    color:var(--text-dim);

    user-select:none;

    flex-shrink:0;
}

.newsDragHandle{

    width:28px;

    height:28px;

    padding:0;

    border:none;

    border-radius:6px;

    background:transparent;

    color:var(--text-dim);

    cursor:grab;

    font-size:14px;

    line-height:1;

    letter-spacing:2px;

    display:flex;

    align-items:center;

    justify-content:center;
}

.newsDragHandle:hover{

    background:var(--border);

    color:var(--text-muted);
}

.newsDragHandle:active{

    cursor:grabbing;
}

.newsWindowControls{

    display:flex;

    align-items:center;

    gap:6px;
}

.newsBoardHeader{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:8px;

    padding:12px 12px 10px;

    border-bottom:1px solid var(--border);

    background:var(--bg-chip);

    flex-shrink:0;
}

.newsBoardBrand{

    display:flex;

    align-items:center;

    gap:8px;

    color:var(--accent);

    text-decoration:none;

    font-weight:600;

    font-size:14px;

    min-width:0;
}

.newsBoardBrand img{

    width:18px;

    height:18px;

    flex-shrink:0;
}

.newsBoardBrand span{

    overflow:hidden;

    text-overflow:ellipsis;

    white-space:nowrap;
}

.newsBoardHeaderMeta{

    display:flex;

    align-items:center;

    gap:8px;

    flex-shrink:0;
}

.newsBoardUpdated{

    color:var(--text-dim);

    font-size:11px;

    white-space:nowrap;
}

.newsRefreshButton,
.newsEditButton,
.newsRemoveButton,
.newsMinimiseButton,
.newsMaximiseButton{

    width:30px;

    height:30px;

    padding:0;

    border-radius:6px;

    background:var(--border);

    font-size:16px;

    line-height:1;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;
}

.newsRefreshButton:hover,
.newsEditButton:hover,
.newsRemoveButton:hover,
.newsMinimiseButton:hover,
.newsMaximiseButton:hover{

    background:var(--btn);
}

.newsRefreshButton:disabled,
.newsMinimiseButton:disabled,
.newsMaximiseButton:disabled{

    opacity:.35;

    cursor:default;
}

.newsBoardBody{

    display:flex;

    flex-direction:column;

    min-height:0;

    flex:1 1 auto;

    overflow:hidden;
}

.newsRailActions{

    display:flex;

    gap:8px;

    flex:0 0 auto;

    width:100%;
}

.newsBoardStatus{

    padding:14px 12px;

    color:var(--text-dim);

    font-size:13px;

    flex-shrink:0;
}

.newsList{

    list-style:none;

    margin:0;

    padding:4px 0 8px;

    overflow:auto;

    min-height:0;

    flex:1 1 auto;

    scrollbar-width:none;

    -ms-overflow-style:none;
}

.newsList::-webkit-scrollbar{

    display:none;
}

.newsList li{

    padding:10px 12px;

    border-top:1px solid var(--border);
}

.newsList li:first-child{

    border-top:none;
}

.newsList a{

    display:block;

    color:var(--text-secondary);

    text-decoration:none;

    font-size:13px;

    line-height:1.35;

    margin-bottom:4px;
}

.newsList a:hover{

    color:var(--accent-bright);
}

.newsList time{

    display:block;

    color:var(--text-dim);

    font-size:11px;
}

@media (max-width:1200px){

    .pageLayout{

        grid-template-columns:1fr;

    }

    .newsRail,
    .widgetRail{

        position:static;

        height:auto;

        max-height:none;

        overflow:visible;

    }

    .widgetRail .heroPanels{

        display:grid;

        grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));

        gap:10px;

        height:auto;

        flex:none;

    }

    .widgetRail .heroUtility{

        flex:none;

        min-height:160px;

    }

    .widgetRail .railActionRow{

        grid-column:1 / -1;

    }

    .newsRail{

        display:grid;

        grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));

    }

    .newsBoard{

        flex:none;

        max-height:min(420px, 60vh);

    }

    .newsBoard.minimized{

        max-height:none;

    }

}

h1{

    margin-bottom:25px;
}

.heroPanels{

    display:flex;

    flex-direction:column;

    gap:10px;

    margin:0;

    align-items:stretch;

    flex:1;

    min-height:0;

    height:100%;
}

.heroPanel{

    position:relative;

    min-height:0;

    border-radius:14px;

    overflow:hidden;

    border:1px solid var(--border);

    background:
        radial-gradient(ellipse 80% 90% at 50% 0%, var(--glow), transparent 60%),
        linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg) 100%);
}

.heroCalendar{

    display:flex;

    flex-direction:column;

    padding:10px 10px 8px;

    flex:0 0 auto;

    background:
        radial-gradient(ellipse 70% 80% at 15% 10%, var(--glow-soft), transparent 55%),
        linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg) 100%);
}

.calendarHeader{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:6px;

    margin-bottom:6px;
}

.calendarMonthLabel{

    margin:0;

    flex:1;

    min-width:0;

    text-align:center;

    font-family:"Outfit",Segoe UI,sans-serif;

    font-size:.82rem;

    font-weight:650;

    color:var(--accent-soft);

    letter-spacing:.02em;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;
}

.calendarGrid{

    display:grid;

    grid-template-columns:repeat(7, minmax(0, 1fr));

    grid-template-rows:auto repeat(6, 22px);

    gap:2px;

    height:170px;

    flex:0 0 auto;
}

.calendarWeekday,
.calendarDay{

    display:flex;

    align-items:center;

    justify-content:center;

    min-height:18px;

    font-size:11px;

    line-height:1;

    user-select:none;
}

.calendarWeekday{

    color:var(--text-faint);

    font-weight:600;

    font-size:10px;
}

.calendarDay{

    color:var(--text-secondary);

    border-radius:5px;

    font-variant-numeric:tabular-nums;
}

.calendarDay.isEmpty{

    visibility:hidden;
}

.calendarDay.isToday{

    background:var(--today);

    color:var(--text);

    font-weight:700;
}

button.calendarDay{

    width:100%;

    border:none;

    background:transparent;

    color:inherit;

    font:inherit;

    cursor:pointer;

    position:relative;

    padding:0;

    min-height:22px;
}

button.calendarDay:hover{

    background:var(--glow);

    color:var(--text);
}

button.calendarDay.isToday:hover{

    background:var(--accent-bright);
}

button.calendarDay.hasReminder::after{

    content:"";

    position:absolute;

    left:50%;

    bottom:2px;

    width:4px;

    height:4px;

    border-radius:50%;

    background:var(--warn);

    transform:translateX(-50%);
}

button.calendarDay.isToday.hasReminder::after{

    background:var(--warn);
}

button.calendarDay.isPast{

    color:var(--text-faint);

    cursor:default;
}

button.calendarDay.isPast:hover{

    background:transparent;

    color:var(--text-faint);
}

.reminderAlerts{

    margin-top:8px;

    padding:8px;

    border:2px solid transparent;

    border-radius:10px;

    flex:0 0 auto;

    min-height:96px;

    transition:border-color .2s ease, box-shadow .2s ease;
}

.reminderAlerts.isAlerting{

    animation:reminderAlertFlash 1.15s ease-in-out infinite;
}

@keyframes reminderAlertFlash{

    0%,
    100%{

        border-color:var(--warn);

        box-shadow:0 0 0 0 color-mix(in srgb, var(--warn) 35%, transparent);

    }

    50%{

        border-color:color-mix(in srgb, var(--warn) 25%, transparent);

        box-shadow:0 0 0 4px color-mix(in srgb, var(--warn) 22%, transparent);

    }

}

@media (prefers-reduced-motion:reduce){

    .reminderAlerts.isAlerting{

        animation:none;

        border-color:var(--warn);

        box-shadow:0 0 0 2px color-mix(in srgb, var(--warn) 25%, transparent);

    }

}

.reminderAlertsHeader{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:8px;

    margin-bottom:6px;
}

.reminderAlertsTitle{

    font-family:"Outfit",Segoe UI,sans-serif;

    font-size:.72rem;

    font-weight:650;

    letter-spacing:.04em;

    text-transform:uppercase;

    color:var(--accent-soft);
}

.reminderAlertsCount{

    font-size:10px;

    color:var(--text-faint);
}

.reminderAlertStage{

    position:relative;

    height:54px;
}

.reminderAlertEmpty{

    margin:0;

    height:100%;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:8px 9px;

    border-radius:8px;

    border:1px dashed var(--border-strong);

    background:var(--hover-wash);

    color:var(--text-faint);

    font-size:12px;

    text-align:center;
}

.reminderAlertCard{

    display:flex;

    align-items:flex-start;

    gap:6px;

    height:100%;

    box-sizing:border-box;

    padding:8px 6px 8px 9px;

    border-radius:8px;

    background:var(--glow-soft);

    border:1px solid var(--glow-mid);

    opacity:0;

    transform:translateY(6px);

    transition:opacity .55s ease, transform .55s ease;
}

.reminderAlertBody{

    flex:1;

    min-width:0;

    display:flex;

    flex-direction:column;

    justify-content:center;

    gap:4px;

    align-self:stretch;
}

.reminderAlertCard.isVisible{

    opacity:1;

    transform:translateY(0);
}

.reminderAlertCard.isLeaving{

    opacity:0;

    transform:translateY(-6px);
}

.reminderAlertTime{

    font-size:11px;

    font-weight:600;

    color:var(--warn);

    font-variant-numeric:tabular-nums;
}

.reminderAlertText{

    margin:0;

    font-size:12px;

    line-height:1.35;

    color:var(--text);

    word-break:break-word;
}

.reminderAlertDismiss{

    flex-shrink:0;

    width:22px;

    height:22px;

    padding:0;

    border:none;

    border-radius:6px;

    background:transparent;

    color:var(--text-faint);

    font-size:12px;

    line-height:1;

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;
}

.reminderAlertDismiss:hover{

    background:var(--hover-wash-strong);

    color:var(--text);
}

.reminderDialogDate{

    margin:0 0 4px;

    font-size:14px;

    color:var(--accent-soft);
}

.reminderDayList{

    display:flex;

    flex-direction:column;

    gap:6px;

    margin-top:4px;

    max-height:140px;

    overflow:auto;
}

.reminderDayItem{

    display:flex;

    align-items:flex-start;

    gap:8px;

    padding:8px 10px;

    border-radius:8px;

    background:var(--bg);

    border:1px solid var(--border-strong);
}

.reminderDayItemBody{

    flex:1;

    min-width:0;
}

.reminderDayItemTime{

    display:block;

    font-size:12px;

    font-weight:600;

    color:var(--warn);

    margin-bottom:2px;
}

.reminderDayItemText{

    display:block;

    font-size:13px;

    color:var(--text-secondary);

    word-break:break-word;
}

.reminderDayDelete{

    flex-shrink:0;

    width:28px;

    height:28px;

    padding:0;

    border:none;

    border-radius:6px;

    background:var(--btn);

    color:var(--text-secondary);

    cursor:pointer;

    font-size:13px;

    line-height:1;

    display:flex;

    align-items:center;

    justify-content:center;
}

.reminderDayDelete:hover{

    background:var(--danger-soft);

    color:var(--text);
}

.heroClock{

    display:flex;

    justify-content:center;

    align-items:center;

    margin:0;

    padding:14px 12px 12px;

    flex:0 0 auto;
}

.heroWeather{

    display:flex;

    flex-direction:column;

    padding:8px 10px;

    flex:0 0 auto;

    background:
        radial-gradient(ellipse 70% 80% at 85% 15%, var(--warn-glow), transparent 55%),
        radial-gradient(ellipse 80% 90% at 20% 100%, var(--glow-soft), transparent 55%),
        linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg) 100%);
}

.weatherHeader{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:8px;

    margin-bottom:4px;
}

.weatherHeading{

    margin:0;

    font-family:"Outfit",Segoe UI,sans-serif;

    font-size:.72rem;

    font-weight:650;

    color:var(--accent-soft);

    letter-spacing:.04em;

    text-transform:uppercase;
}

.weatherIconButton{

    width:24px;

    height:24px;

    padding:0;

    border:none;

    border-radius:6px;

    background:var(--border);

    color:var(--text-secondary);

    font-size:12px;

    line-height:1;

    cursor:pointer;

    flex-shrink:0;
}

.weatherIconButton:hover{

    background:var(--accent-hover);

    color:var(--on-accent);
}

.weatherBody{

    display:flex;

    flex-direction:row;

    align-items:center;

    gap:8px;

    min-height:0;
}

.weatherMain{

    display:flex;

    align-items:center;

    gap:10px;

    width:100%;

    min-width:0;

    flex-wrap:wrap;
}

.weatherGlyph{

    font-size:1.55rem;

    line-height:1;

    filter:grayscale(.15);

    flex-shrink:0;
}

.weatherTemps{

    min-width:0;

    flex:0 0 auto;
}

.weatherTemp{

    margin:0;

    font-family:"Outfit",Segoe UI,sans-serif;

    font-size:1.45rem;

    font-weight:700;

    line-height:1;

    color:var(--text);

    font-variant-numeric:tabular-nums;
}

.weatherLabel{

    margin:2px 0 0;

    color:var(--text-quiet);

    font-size:.72rem;

    white-space:nowrap;
}

.weatherMetaBlock{

    min-width:0;

    flex:1 1 auto;
}

.weatherMeta,
.weatherRange,
.weatherUpdated,
.weatherStatus{

    margin:0;

    color:var(--text-quiet);

    font-size:11px;

    line-height:1.3;
}

.weatherMeta{

    color:var(--text-secondary);

    font-weight:600;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;
}

.weatherUpdated{

    flex:0 0 auto;

    text-align:right;

    white-space:nowrap;
}

.weatherStatus.isError{

    color:var(--warn);
}

.aboutRailButton{

    width:100%;

    flex:1 1 0;

    min-width:0;

    padding:6px 10px;

    border:1px solid var(--border);

    border-radius:10px;

    background:var(--bg-elevated);

    color:var(--text-quiet);

    font-family:"Outfit",Segoe UI,sans-serif;

    font-size:.78rem;

    font-weight:650;

    letter-spacing:.04em;

    text-transform:uppercase;

    cursor:pointer;

    line-height:1.2;
}

.aboutRailButton:hover{

    border-color:var(--accent-bright);

    color:var(--accent-soft);

    background:var(--hover-wash);
}

.railActionRow{

    display:flex;

    gap:8px;

    flex:0 0 auto;

    width:100%;
}

.heroUtility{

    display:flex;

    flex-direction:column;

    padding:10px 10px 8px;

    flex:1 1 auto;

    min-height:0;

    background:
        radial-gradient(ellipse 70% 80% at 50% 0%, var(--glow-soft), transparent 55%),
        linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg) 100%);
}

.utilityTabs{

    display:flex;

    gap:4px;

    margin-bottom:8px;

    padding:3px;

    border-radius:10px;

    background:var(--bg-deep);

    border:1px solid var(--border);

    flex:0 0 auto;
}

.utilityTab{

    flex:1;

    min-width:0;

    padding:7px 8px;

    border:none;

    border-radius:8px;

    background:transparent;

    color:var(--text-quiet);

    font-family:"Outfit",Segoe UI,sans-serif;

    font-size:.72rem;

    font-weight:650;

    letter-spacing:.04em;

    text-transform:uppercase;

    cursor:pointer;
}

.utilityTab:hover{

    color:var(--text-secondary);

    background:var(--hover-wash);
}

.utilityTab.isActive{

    color:var(--accent-soft);

    background:var(--accent-surface);

    box-shadow:inset 0 0 0 1px var(--glow-mid);
}

.utilityPanels{

    flex:1;

    min-height:0;

    display:flex;

    flex-direction:column;
}

.utilityPanel{

    display:none;

    flex:1;

    min-height:0;

    overflow:auto;
}

.utilityPanel.isActive{

    display:flex;

    flex-direction:column;
}

.utilityPanel[data-utility-panel="settings"]{

    overflow:auto;

    scrollbar-width:none;

    -ms-overflow-style:none;
}

.utilityPanel[data-utility-panel="settings"]::-webkit-scrollbar{

    display:none;
}

.appsRecentHeader{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:8px;

    margin:0 0 8px;

    min-width:0;
}

.appsRecentHeading{

    margin:0;

    padding:0 2px;

    font-family:"Outfit",Segoe UI,sans-serif;

    font-size:.68rem;

    font-weight:650;

    letter-spacing:.06em;

    text-transform:uppercase;

    color:var(--text-quiet);
}

.appsRecentClear{

    flex:0 0 auto;

    margin:0;

    padding:2px 8px;

    border:1px solid var(--border);

    border-radius:8px;

    background:transparent;

    color:var(--text-quiet);

    font-family:"Outfit",Segoe UI,sans-serif;

    font-size:.68rem;

    font-weight:650;

    letter-spacing:.03em;

    cursor:pointer;
}

.appsRecentClear:hover{

    border-color:var(--accent-bright);

    color:var(--accent-soft);

    background:var(--hover-wash);
}

.appsRecentEmpty{

    margin:0;

    padding:10px 8px;

    font-size:.78rem;

    line-height:1.45;

    color:var(--text-quiet);
}

.appsRecentList{

    display:flex;

    flex-wrap:wrap;

    gap:6px;

    min-height:0;

    align-content:flex-start;
}

.appsRecentItem{

    display:flex;

    align-items:center;

    justify-content:center;

    width:34px;

    height:34px;

    padding:0;

    border:1px solid transparent;

    border-radius:8px;

    color:inherit;

    text-decoration:none;

    background:transparent;

    flex:0 0 auto;
}

.appsRecentItem:hover{

    border-color:var(--border);

    background:var(--hover-wash);
}

.appsRecentIcon{

    width:20px;

    height:20px;

    border-radius:4px;

    display:block;
}

.settingsList{

    display:flex;

    flex-direction:column;

    gap:6px;

    min-height:0;

    flex:1;
}

.settingsRow{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:10px;

    width:100%;

    padding:10px 11px;

    border:1px solid var(--border);

    border-radius:10px;

    background:var(--bg-deep);

    color:var(--text-secondary);

    cursor:pointer;

    text-align:left;

    font:inherit;
}

.settingsRow[hidden]{

    display:none !important;
}

.settingsRow:hover{

    border-color:var(--accent-bright);

    background:var(--hover-wash);

    color:var(--text);
}

.settingsRowLabel{

    font-family:"Outfit",Segoe UI,sans-serif;

    font-size:.78rem;

    font-weight:650;

    letter-spacing:.03em;
}

.settingsRowMeta{

    display:inline-flex;

    align-items:center;

    gap:6px;

    min-width:0;
}

.settingsRowValue{

    font-size:12px;

    color:var(--accent-soft);

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

    max-width:9em;
}

.settingsRowChevron{

    color:var(--text-faint);

    font-size:16px;

    line-height:1;
}

.settingsHelp{

    margin:0;

    font-size:12px;

    line-height:1.35;

    color:var(--text-quiet);
}

.themeDialogBody{

    display:flex;

    flex-direction:column;

    gap:10px;

    padding:24px;

    min-width:min(360px, 86vw);
}

.themeDialogBody h2{

    color:var(--accent);

    font-size:1.2rem;

    margin:0;
}

.aboutDialogBody{

    display:flex;

    flex-direction:column;

    gap:12px;

    padding:24px;
}

.aboutDialogBody h2{

    margin:0;

    color:var(--accent);

    font-size:1.2rem;
}

.aboutDialogBody p{

    margin:0;

    font-size:14px;

    line-height:1.45;

    color:var(--text-secondary);
}

.aboutPoints{

    margin:0;

    padding-left:18px;

    display:flex;

    flex-direction:column;

    gap:8px;

    font-size:13px;

    line-height:1.45;

    color:var(--text-secondary);
}

.aboutPoints strong{

    color:var(--text);

    font-weight:650;
}

.bookmarkImportBody{

    display:flex;

    flex-direction:column;

    gap:10px;

    padding:24px;

    max-height:calc(100vh - 48px);

    overflow:auto;
}

.bookmarkImportBody h2{

    margin:0;

    color:var(--accent);

    font-size:1.2rem;
}

.icsImportTiming{

    margin:0;

    padding:10px 12px 12px;

    border:1px solid var(--border);

    border-radius:10px;

    background:var(--bg-deep);

    min-width:0;
}

.icsImportTiming legend{

    padding:0 4px;

    font-family:"Outfit",Segoe UI,sans-serif;

    font-size:.72rem;

    font-weight:650;

    letter-spacing:.04em;

    text-transform:uppercase;

    color:var(--text-quiet);
}

.icsImportTimingOptions{

    display:flex;

    flex-direction:column;

    align-items:stretch;

    gap:8px;
}

.icsImportTimingOption{

    display:grid;

    grid-template-columns:18px minmax(0, 1fr);

    align-items:center;

    column-gap:10px;

    margin:0;

    color:var(--text-secondary);

    font-size:.85rem;

    line-height:1.35;

    cursor:pointer;
}

.icsImportTimingOption input{

    margin:0;

    width:16px;

    height:16px;

    justify-self:center;
}

.icsImportTimingOption span{

    min-width:0;
}

.manageRemindersBody{

    display:flex;

    flex-direction:column;

    gap:10px;

    padding:24px;

    max-height:calc(100vh - 48px);

    overflow:auto;
}

.manageRemindersBody h2{

    margin:0;

    color:var(--accent);

    font-size:1.2rem;
}

.manageRemindersToolbar{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:10px;
}

.manageRemindersSelectAll{

    display:flex;

    align-items:center;

    gap:8px;

    color:var(--text-quiet);

    font-size:.82rem;

    cursor:pointer;
}

.manageRemindersSelectAll input{

    margin:0;
}

.manageRemindersList{

    display:flex;

    flex-direction:column;

    gap:6px;

    max-height:min(420px, 50vh);

    overflow:auto;

    padding:2px;
}

.manageRemindersItem{

    display:flex;

    align-items:flex-start;

    gap:10px;

    margin:0;

    padding:10px;

    border:1px solid var(--border);

    border-radius:10px;

    background:var(--bg-deep);

    cursor:pointer;
}

.manageRemindersItem:hover{

    border-color:var(--accent-bright);

    background:var(--hover-wash);
}

.manageRemindersItem input{

    margin:3px 0 0;

    flex:0 0 auto;
}

.manageRemindersItemBody{

    display:flex;

    flex-direction:column;

    gap:2px;

    min-width:0;
}

.manageRemindersItemTime{

    font-size:.72rem;

    font-weight:650;

    color:var(--warn);
}

.manageRemindersItemText{

    font-size:.85rem;

    color:var(--text-secondary);

    word-break:break-word;
}

.manageRemindersEmpty{

    margin:0;

    padding:12px 4px;

    color:var(--text-quiet);

    font-size:.85rem;
}

.bookmarkImportSteps{

    margin:0;

    padding-left:18px;

    color:var(--text-quiet);

    font-size:12px;

    line-height:1.5;
}

.bookmarkImportSteps li + li{

    margin-top:4px;
}

.bookmarkImportSteps code,
.bookmarkImportSteps kbd{

    font-size:11px;

    padding:1px 5px;

    border-radius:4px;

    background:var(--bg);

    border:1px solid var(--border);

    color:var(--text-secondary);
}

.bookmarkImportGuide{

    display:flex;

    flex-direction:column;

    gap:10px;

    padding:12px;

    border:1px solid var(--border);

    border-radius:10px;

    background:var(--bg-deep);
}

.bookmarkImportGuideTitle{

    margin:0;

    font-family:"Outfit",Segoe UI,sans-serif;

    font-size:.72rem;

    font-weight:650;

    letter-spacing:.04em;

    text-transform:uppercase;

    color:var(--accent-soft);
}

.bookmarkImportDetails{

    border:1px solid var(--border);

    border-radius:8px;

    background:var(--bg);

    padding:0 10px;
}

.bookmarkImportDetails + .bookmarkImportDetails{

    margin-top:0;
}

.bookmarkImportDetails summary{

    cursor:pointer;

    list-style:none;

    padding:9px 2px;

    font-size:13px;

    font-weight:600;

    color:var(--text-secondary);
}

.bookmarkImportDetails summary::-webkit-details-marker{

    display:none;
}

.bookmarkImportDetails summary::before{

    content:"›";

    display:inline-block;

    width:1em;

    margin-right:4px;

    color:var(--text-faint);

    transition:transform .15s ease;
}

.bookmarkImportDetails[open] summary::before{

    transform:rotate(90deg);
}

.bookmarkImportDetails[open] summary{

    color:var(--text);

    border-bottom:1px solid var(--border);

    margin-bottom:8px;
}

.bookmarkImportDetails .bookmarkImportSteps{

    padding-bottom:10px;
}

.bookmarkImportFileLabel{

    font-size:14px;

    color:var(--text-muted);
}

#bookmarkImportFile{

    width:100%;

    color:var(--text-secondary);

    font-size:13px;
}

.bookmarkImportStatus{

    margin:0;

    font-size:13px;

    color:var(--accent-soft);
}

.bookmarkImportStatus.isError{

    color:var(--warn);
}

.bookmarkImportMapping{

    display:flex;

    flex-direction:column;

    gap:8px;

    min-height:0;
}

.bookmarkImportFolderList{

    display:flex;

    flex-direction:column;

    gap:8px;

    max-height:min(320px, 40vh);

    overflow:auto;

    padding-right:2px;
}

.bookmarkImportFolderRow{

    display:flex;

    flex-direction:column;

    gap:6px;

    padding:10px;

    border:1px solid var(--border);

    border-radius:10px;

    background:var(--bg-deep);
}

.bookmarkImportFolderName{

    font-size:13px;

    font-weight:600;

    color:var(--text);
}

.bookmarkImportFolderMeta{

    font-size:11px;

    color:var(--text-quiet);
}

.bookmarkImportFolderRow select{

    width:100%;

    background:var(--bg);

    color:var(--text);

    border:1px solid var(--border-input);

    border-radius:8px;

    padding:10px;

    font-size:14px;
}

.bookmarkImportFolderRow select:focus{

    outline:none;

    border-color:var(--accent);
}

.themePicker{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:8px;

    overflow:auto;

    padding:2px;

    max-height:min(420px, 55vh);

    min-height:0;
}

.themeOption{

    display:flex;

    flex-direction:column;

    align-items:stretch;

    gap:6px;

    padding:8px;

    border:1px solid var(--border);

    border-radius:10px;

    background:var(--bg-deep);

    color:var(--text-secondary);

    cursor:pointer;

    text-align:left;

    font:inherit;
}

.themeOption:hover{

    border-color:var(--accent-bright);

    background:var(--hover-wash);
}

.themeOption.isActive{

    border-color:var(--accent-bright);

    box-shadow:inset 0 0 0 1px var(--accent-bright);

    background:var(--accent-surface);

    color:var(--accent-soft);
}

.themeSwatch{

    display:block;

    height:28px;

    border-radius:7px;

    border:1px solid var(--border-strong);

    background:
        linear-gradient(135deg, var(--swatch-a) 0 50%, var(--swatch-b) 50% 100%);
}

.themeOptionLabel{

    font-family:"Outfit",Segoe UI,sans-serif;

    font-size:.72rem;

    font-weight:650;

    letter-spacing:.02em;
}

.idleTimeoutPicker{

    display:grid;

    grid-template-columns:repeat(2, minmax(0, 1fr));

    gap:8px;
}

.idleTimeoutOption{

    padding:12px 10px;

    border:1px solid var(--border);

    border-radius:10px;

    background:var(--bg-deep);

    color:var(--text-secondary);

    cursor:pointer;

    text-align:center;

    font:inherit;

    font-size:.85rem;

    font-weight:650;
}

.idleTimeoutOption:hover{

    border-color:var(--accent-bright);

    background:var(--hover-wash);
}

.idleTimeoutOption.isActive{

    border-color:var(--accent-bright);

    box-shadow:inset 0 0 0 1px var(--accent-bright);

    background:var(--accent-surface);

    color:var(--text);
}

.trashIcon{

    display:block;

    flex-shrink:0;
}

.deleteSectionButton .trashIcon,
.reminderDayDelete .trashIcon{

    width:14px;

    height:14px;
}

.newsRemoveButton .trashIcon{

    width:15px;

    height:15px;
}

.deleteLinkButton .trashIcon,
.reminderAlertDismiss .trashIcon{

    width:12px;

    height:12px;
}

.heroClockStamp{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:4px;

    color:var(--text);

    text-align:center;
}

.heroClockTime{

    font-family:"Outfit",Segoe UI,sans-serif;

    font-size:clamp(1.8rem, 3.8vw, 2.6rem);

    font-weight:700;

    letter-spacing:.02em;

    line-height:.95;

    color:var(--text);

    font-variant-numeric:tabular-nums;

    text-shadow:0 6px 18px var(--shadow);
}

.heroClockDate{

    font-family:"Newsreader",Georgia,"Times New Roman",serif;

    font-size:clamp(.88rem, 1.5vw, 1.05rem);

    font-weight:500;

    color:var(--text-quiet);

    letter-spacing:.01em;
}

.searchBar{

    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:15px;

    width:100%;
}

.searchBar input{

    flex:1;

    min-width:0;
}

@media (max-width:700px){

    .heroClock{

        padding:12px 10px 10px;
    }

}

input{

    flex:1;

    padding:12px;

    border:none;

    border-radius:8px;

    font-size:16px;
}

button{

    padding:12px 20px;

    border:none;

    border-radius:8px;

    cursor:pointer;

    background:var(--accent-hover);

    color:var(--text);
}

button:hover{

    background:var(--accent);
}

#searchEngines{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    margin-bottom:20px;

    width:100%;
}

.engine{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    flex:1 1 0;

    min-width:110px;

    padding:8px 15px;

    background:var(--bg-chip);

    border:1px solid var(--border-input);

    border-radius:20px;

    cursor:pointer;

    color:var(--text);
}

.engine img{

    width:20px;
    height:20px;
}

.engine.selected{

    border-color:var(--accent-bright);

    background:var(--accent-surface);
}

hr{

    margin:20px 0;

    border:1px solid var(--border);
}

.pagesBar{

    display:flex;

    align-items:center;

    gap:8px;

    margin:0 0 16px;

    flex-wrap:wrap;
}

.pagesTabs{

    display:flex;

    flex-wrap:wrap;

    gap:6px;

    flex:1;

    min-width:0;
}

.pageTab{

    display:inline-flex;

    align-items:center;

    gap:2px;

    border:1px solid var(--border-strong);

    border-radius:999px;

    background:var(--bg-chip);

    overflow:hidden;
}

.pageTab.isActive{

    border-color:var(--accent-bright);

    background:var(--accent-surface);
}

.pageTabButton{

    border:none;

    background:transparent;

    color:var(--text-secondary);

    padding:7px 12px;

    font-size:13px;

    cursor:pointer;
}

.pageTab.isActive .pageTabButton{

    color:var(--accent-soft);

    font-weight:600;
}

.pageTabEdit{

    width:28px;

    height:28px;

    margin-right:2px;

    padding:0;

    border:none;

    border-radius:999px;

    background:transparent;

    color:var(--text-dim);

    cursor:pointer;

    font-size:12px;
}

.pageTabLock{

    width:28px;

    height:28px;

    padding:0;

    border:none;

    border-radius:999px;

    background:transparent;

    color:var(--text-dim);

    cursor:pointer;

    font-size:12px;

    line-height:1;
}

.pageTabLock:hover,
.pageTabEdit:hover,
.pageTabButton:hover{

    color:var(--text);

    background:var(--hover-wash);
}

.pageTabLock.isLocked{

    color:var(--warn);
}

.pageTabLock.isUnlocked{

    color:var(--accent-soft);
}

.pageTabLock.unlocked{

    opacity:.65;
}

.pageTab.isLocked .pageTabButton{

    color:var(--text-dim);
}

.pageLocked{

    grid-column:1 / -1;

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:14px;

    padding:40px 20px;
}

.pageUnlockButton{

    padding:10px 18px;

    border:none;

    border-radius:8px;

    background:var(--accent-hover);

    color:var(--text);

    font-size:14px;

    cursor:pointer;
}

.pageUnlockButton:hover{

    background:var(--accent-hover);
}

.addPageButton{

    border:1px dashed var(--border-input);

    border-radius:999px;

    background:var(--bg-elevated);

    color:var(--text-secondary);

    padding:7px 12px;

    font-size:13px;

    cursor:pointer;
}

.addPageButton:hover{

    border-color:var(--accent-bright);

    color:var(--accent);
}

.pagesEmpty{

    grid-column:1 / -1;

    margin:0;

    padding:18px 8px;

    color:var(--text-quiet);

    font-size:14px;
}

#content{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:20px;

    align-items:start;

    width:100%;

    min-width:0;
}

.sectionsFooter{

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    gap:10px;

    margin-top:20px;
}

.sectionsFooter button{

    font-size:14px;

    padding:10px 18px;

    background:var(--bg-chip);

    border:1px dashed var(--border-input);

    color:var(--text-secondary);
}

.sectionsFooter button:hover{

    background:var(--border);

    border-color:var(--accent-bright);

    color:var(--accent);
}

.sectionsFooter .secondaryFooterButton{

    border-style:solid;

    background:var(--bg-elevated);
}

#bookmarkletDialog,
#extensionDialog{

    width:min(480px, calc(100vw - 32px));
}

.bookmarkletPanel{

    display:flex;

    flex-direction:column;

    gap:12px;

    padding:24px;
}

.bookmarkletPanel h2{

    margin:0;

    color:var(--accent);

    font-size:1.2rem;
}

.bookmarkletSteps{

    margin:0;

    padding-left:1.25rem;

    color:var(--text-muted);

    font-size:14px;

    line-height:1.5;
}

.bookmarkletSteps li{

    margin-bottom:8px;
}

.bookmarkletSteps kbd{

    display:inline-block;

    padding:1px 6px;

    border:1px solid var(--border-input);

    border-radius:4px;

    background:var(--bg);

    font-size:12px;
}

.bookmarkletSteps code{

    font-size:12px;

    color:var(--accent-soft);
}

.bookmarkletSteps a{

    color:var(--accent);
}

.bookmarkletDragRow{

    display:flex;

    justify-content:center;

    margin:8px 0 0;
}

.bookmarkletLink{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:12px 20px;

    border-radius:10px;

    background:var(--today);

    color:var(--text) !important;

    text-decoration:none;

    font-weight:600;

    cursor:grab;

    user-select:none;
}

.bookmarkletLink.isDisabled{

    opacity:.45;

    pointer-events:none;
}

.bookmarkletLink:hover{

    background:var(--accent-bright);
}

.bookmarkletPanel label{

    font-size:14px;

    color:var(--text-muted);
}

.bookmarkletPanel input[type="url"]{

    width:100%;

    background:var(--bg);

    color:var(--text);

    border:1px solid var(--border-input);

    border-radius:8px;

    padding:12px;

    font-size:15px;

    box-sizing:border-box;
}

.bookmarkletPanel input[type="url"]:focus{

    outline:none;

    border-color:var(--accent-bright);
}

.dialogHelp.isError{

    color:var(--warn);
}

.sectionsColumn{

    display:flex;

    flex-direction:column;

    gap:20px;

    min-width:0;

    width:100%;
}

.category{

    margin-bottom:0;

    min-width:0;

    width:100%;

    height:fit-content;

    flex:0 0 auto;
}

.category.dragging{

    opacity:.45;
}

.category.dragOver{

    outline:2px dashed var(--accent-bright);

    outline-offset:4px;

    border-radius:12px;
}

.category h2{

    color:var(--accent);

    margin-bottom:15px;
}

@media (max-width:700px){

    #content{

        grid-template-columns:1fr;

    }

}

.tiles{

    display:grid;

    grid-template-columns:repeat(2, minmax(0, 1fr));

    gap:8px;
}

.tile{

    position:relative;

    width:100%;

    min-width:0;

    height:34px;

    display:flex;

    align-items:center;

    text-decoration:none;

    color:var(--text);

    background:var(--bg-chip);

    border-radius:8px;

    padding:6px 8px 6px 4px;

    transition:.2s;

    box-sizing:border-box;

    gap:4px;

    font-size:13px;
}

.tile.dragging{

    opacity:.45;
}

.tile.dragOver,
.tiles.dragOver{

    outline:2px dashed var(--accent-bright);

    outline-offset:2px;
}

.tile:hover{

    transform:translateY(-2px);

    background:var(--today);

    box-shadow:0 4px 12px rgba(0,0,0,.35);
}

.tile.dragging:hover{

    transform:none;
}

.tileDragHandle{

    width:18px;

    height:22px;

    padding:0;

    border:none;

    border-radius:5px;

    background:transparent;

    color:var(--text-dim);

    cursor:grab;

    font-size:12px;

    line-height:1;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;
}

.tileDragHandle:hover{

    background:rgba(0,0,0,.25);

    color:var(--text-secondary);
}

.tileDragHandle:active{

    cursor:grabbing;
}

.tile img{

    width:18px;

    height:18px;

    margin-right:4px;

    flex-shrink:0;
}

.tile > span{

    overflow:hidden;

    text-overflow:ellipsis;

    white-space:nowrap;

    padding-right:44px;

    min-width:0;

    font-size:13px;
}

.deleteLinkButton{

    position:absolute;

    top:3px;

    right:3px;

    width:18px;

    height:18px;

    padding:0;

    border:none;

    border-radius:5px;

    background:transparent;

    color:var(--text-dim);

    font-size:12px;

    line-height:1;

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;

    opacity:0;

    transition:opacity .15s, background .15s, color .15s;
}

.editLinkButton{

    position:absolute;

    top:3px;

    right:22px;

    width:18px;

    height:18px;

    padding:0;

    border:none;

    border-radius:5px;

    background:transparent;

    color:var(--text-dim);

    font-size:11px;

    line-height:1;

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;

    opacity:0;

    transition:opacity .15s, background .15s, color .15s;
}

.tile:hover .deleteLinkButton,
.tile:hover .editLinkButton,
.deleteLinkButton:focus-visible,
.editLinkButton:focus-visible{

    opacity:1;
}

.deleteLinkButton:hover,
.editLinkButton:hover{

    background:rgba(0,0,0,.35);

    color:var(--text);
}

.categoryHeader {

    background:var(--bg-chip);

    color:var(--accent);

    padding:15px;

    border-radius:10px;

    cursor:pointer;

    margin-bottom:10px;

    user-select:none;

    display:flex;

    justify-content:space-between;

    align-items:center;

    width:100%;

    box-sizing:border-box;

    gap:10px;

}

.categoryHeader .sectionTitle{

    flex:1;

    min-width:0;

    overflow:hidden;

    text-overflow:ellipsis;

    white-space:nowrap;
}

.dragHandle{

    width:28px;

    height:28px;

    padding:0;

    border:none;

    border-radius:6px;

    background:transparent;

    color:var(--text-dim);

    cursor:grab;

    font-size:16px;

    line-height:1;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;
}

.dragHandle:hover{

    background:var(--border);

    color:var(--text-muted);
}

.dragHandle:active{

    cursor:grabbing;
}


.categoryHeader:hover {

    background:var(--border);

}


.category .tiles {

    display:none;

}


.category.open > .tiles {

    display:grid;

}


.addLinkButton {

    font-size:14px;

    padding:6px 12px;

    background:var(--accent-hover);

    border-radius:6px;

}


.addLinkButton:hover {

    background:var(--accent);

}

.deleteSectionButton{

    width:32px;

    height:32px;

    padding:0;

    border:none;

    border-radius:6px;

    background:var(--btn);

    color:var(--text-secondary);

    font-size:14px;

    line-height:1;

    cursor:pointer;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;
}

.deleteSectionButton:hover{

    background:var(--danger);

    color:var(--text);
}

.editSectionButton{

    width:32px;

    height:32px;

    padding:0;

    border:none;

    border-radius:6px;

    background:var(--btn);

    color:var(--text-secondary);

    font-size:14px;

    line-height:1;

    cursor:pointer;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;
}

.editSectionButton:hover{

    background:var(--accent-hover);

    color:var(--text);
}

.lockSectionButton{

    width:32px;

    height:32px;

    padding:0;

    border:none;

    border-radius:6px;

    background:var(--btn);

    color:var(--text-secondary);

    font-size:14px;

    line-height:1;

    cursor:pointer;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;
}

.lockSectionButton:hover{

    background:var(--accent-hover);

    color:var(--text);
}

.lockSectionButton.isLocked{

    color:var(--warn);
}

.lockSectionButton.isUnlocked{

    color:var(--accent-soft);
}

.lockSectionButton.unlocked{

    opacity:.65;
}

.category.locked .categoryHeader{

    color:var(--text-quiet);
}

.lockedNote{

    margin:0;

    padding:10px 4px;

    color:var(--text-dim);

    font-size:14px;

    grid-column:1 / -1;
}

.checkboxLabel{

    display:flex;

    align-items:center;

    gap:8px;

    margin:12px 0 4px;

    color:var(--text-muted);

    cursor:pointer;

    user-select:none;
}

.checkboxLabel input{

    width:auto;

    margin:0;
}

.dialogHelp{

    margin:0 0 12px;

    color:var(--text-dim);

    font-size:14px;
}

.forgotPinButton{

    align-self:flex-start;

    margin:-2px 0 4px;

    padding:0;

    border:none;

    background:transparent;

    color:var(--accent-soft);

    font-size:13px;

    text-decoration:underline;

    cursor:pointer;
}

.forgotPinButton:hover{

    color:var(--accent);
}

#sectionPinFields{

    margin-top:8px;
}

#addLinkDialog,
#addSectionDialog,
#sectionPinDialog,
#accountPasswordDialog,
#recoveryPhraseSetupDialog,
#recoveryPhraseStatusDialog,
#exportDeleteAccountDialog,
#bookmarkletDialog,
#extensionDialog,
#pageDialog,
#reminderDialog,
#themeDialog,
#idleTimeoutDialog,
#aboutDialog,
#bookmarkImportDialog,
#icsImportDialog,
#manageRemindersDialog,
#newsPanelDialog {

    border:1px solid var(--btn);

    border-radius:12px;

    padding:0;

    background:var(--bg-chip);

    color:var(--text);

    width:min(420px, calc(100vw - 32px));

    box-shadow:0 16px 40px rgba(0,0,0,.5);
}

#themeDialog{

    width:min(460px, calc(100vw - 32px));
}

#bookmarkImportDialog,
#icsImportDialog,
#manageRemindersDialog{

    width:min(520px, calc(100vw - 32px));
}

#addLinkDialog.linkFinderDialog{

    width:min(1100px, calc(100vw - 24px));

    max-height:calc(100vh - 24px);
}

#addLinkDialog.linkFinderDialog #addLinkForm{

    gap:14px;

    max-height:calc(100vh - 24px);

    overflow:auto;
}

.linkFinderHeader{

    display:flex;

    flex-wrap:wrap;

    align-items:flex-end;

    justify-content:space-between;

    gap:12px 20px;
}

.linkFinderHeader h2{

    margin:0;
}

.linkFinderSection{

    display:flex;

    flex-direction:column;

    gap:6px;

    min-width:min(240px, 100%);
}

.linkFinderGrid{

    display:grid;

    grid-template-columns:minmax(220px, 280px) minmax(0, 1fr);

    gap:16px;

    align-items:stretch;

    min-height:420px;
}

.linkFinderDetails{

    display:flex;

    flex-direction:column;

    gap:10px;
}

.linkFinderDetails .dialogHelp{

    margin-top:4px;
}

.linkFinderBrowser{

    display:flex;

    flex-direction:column;

    gap:10px;

    min-width:0;

    min-height:0;
}

.linkFinderSearchRow,
.linkFinderAddressRow{

    display:flex;

    gap:8px;

    align-items:center;
}

.linkFinderSearchRow input,
.linkFinderAddressRow input{

    flex:1;

    min-width:0;
}

.linkFinderSearchRow button,
.linkFinderAddressRow button{

    flex-shrink:0;

    white-space:nowrap;
}

.linkFinderResults{

    display:flex;

    flex-direction:column;

    gap:6px;

    max-height:220px;

    overflow:auto;

    padding:4px;

    border:1px solid var(--btn);

    border-radius:8px;

    background:#232323;
}

.linkFinderResult{

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    gap:2px;

    width:100%;

    margin:0;

    padding:10px 12px;

    border:1px solid transparent;

    border-radius:8px;

    background:#2f2f2f;

    color:inherit;

    text-align:left;

    cursor:pointer;
}

.linkFinderResult:hover{

    border-color:var(--accent-bright);

    background:var(--border);
}

.linkFinderResult.isSelected{

    border-color:var(--accent);

    background:#2a3a4d;
}

.linkFinderResultTitle{

    color:#e6edf3;

    font-size:14px;

    font-weight:600;
}

.linkFinderResultUrl{

    color:var(--accent);

    font-size:12px;

    word-break:break-all;
}

.linkFinderResultSnippet{

    color:var(--text-quiet);

    font-size:12px;

    line-height:1.35;
}

.linkFinderStatus{

    margin:0;

    color:var(--text-quiet);

    font-size:13px;
}

.linkFinderStatus.isError{

    color:var(--warn);
}

.linkFinderPreviewShell{

    position:relative;

    flex:1;

    min-height:280px;

    border:1px solid var(--btn);

    border-radius:10px;

    overflow:hidden;

    background:var(--bg-deep);

    display:flex;

    flex-direction:column;
}

.linkFinderPreviewCard{

    display:flex;

    gap:12px;

    align-items:flex-start;

    padding:14px 14px 10px;

    flex-shrink:0;

    border-bottom:1px solid var(--border);
}

.linkFinderPreviewIcon{

    width:32px;

    height:32px;

    border-radius:8px;

    background:var(--bg-chip);

    flex-shrink:0;
}

.linkFinderPreviewCopy{

    min-width:0;

    display:flex;

    flex-direction:column;

    gap:4px;
}

.linkFinderPreviewTitle{

    margin:0;

    color:#e6edf3;

    font-size:15px;

    font-weight:600;

    line-height:1.3;
}

.linkFinderPreviewUrl{

    margin:0;

    color:var(--accent);

    font-size:12px;

    word-break:break-all;
}

.linkFinderPreviewOpen{

    color:var(--text-secondary);

    font-size:12px;

    text-decoration:underline;

    text-underline-offset:2px;
}

.linkFinderPreviewOpen:hover{

    color:var(--text);
}

.linkFinderThumbWrap{

    position:relative;

    flex:1;

    min-height:180px;

    max-height:260px;

    background:#111;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

    padding:10px;
}

.linkFinderThumbStatus{

    margin:0;

    padding:12px 18px;

    color:var(--text-quiet);

    font-size:13px;

    text-align:center;
}

.linkFinderThumbnail{

    display:block;

    width:auto;

    height:auto;

    max-width:100%;

    max-height:100%;

    object-fit:contain;

    object-position:top center;

    background:#0d0d0d;

    border:1px solid var(--border);

    border-radius:6px;

    box-shadow:0 6px 18px rgba(0,0,0,.35);

    opacity:0;

    transition:opacity .25s ease;
}

.linkFinderThumbnail.isReady{

    opacity:1;
}

.linkFinderThumbnail.isLoading{

    opacity:.35;
}

.linkFinderThumbnail[hidden],
.linkFinderPreviewCard[hidden],
.linkFinderPreviewIcon[hidden],
.linkFinderPreviewOpen[hidden],
.linkFinderThumbStatus[hidden]{

    display:none !important;
}

.linkFinderPreviewNote{

    margin:0;

    padding:6px 10px;

    background:rgba(20,20,20,.92);

    color:var(--text-dim);

    font-size:11px;

    flex-shrink:0;
}

@media (max-width:860px){

    .linkFinderGrid{

        grid-template-columns:1fr;

        min-height:0;
    }

    .linkFinderPreviewShell,
    .linkFinderThumbWrap{

        min-height:160px;

        max-height:220px;
    }

}

#addLinkDialog::backdrop,
#addSectionDialog::backdrop,
#sectionPinDialog::backdrop,
#accountPasswordDialog::backdrop,
#recoveryPhraseSetupDialog::backdrop,
#recoveryPhraseStatusDialog::backdrop,
#exportDeleteAccountDialog::backdrop,
#bookmarkletDialog::backdrop,
#extensionDialog::backdrop,
#pageDialog::backdrop,
#reminderDialog::backdrop,
#themeDialog::backdrop,
#idleTimeoutDialog::backdrop,
#aboutDialog::backdrop,
#bookmarkImportDialog::backdrop,
#icsImportDialog::backdrop,
#manageRemindersDialog::backdrop,
#newsPanelDialog::backdrop {

    background:var(--overlay);
}

#addLinkForm,
#addSectionForm,
#sectionPinForm,
#accountPasswordForm,
#recoveryPhraseSetupForm,
#deleteAccountForm,
#pageForm,
#reminderForm,
#newsPanelForm {

    display:flex;

    flex-direction:column;

    gap:10px;

    padding:24px;
}

#addLinkForm h2,
#addSectionForm h2,
#sectionPinForm h2,
#accountPasswordForm h2,
#recoveryPhraseSetupForm h2,
#deleteAccountForm h2,
#pageForm h2,
#reminderForm h2,
#newsPanelForm h2 {

    color:var(--accent);

    font-size:1.2rem;

    margin-bottom:6px;
}

#addLinkForm label,
#addSectionForm label,
#sectionPinForm label,
#accountPasswordForm label,
#recoveryPhraseSetupForm label,
#deleteAccountForm label,
#pageForm label,
#reminderForm label,
#newsPanelForm label {

    font-size:14px;

    color:var(--text-muted);
}

#addLinkForm input,
#addLinkForm select,
#addSectionForm input,
#sectionPinForm input,
#accountPasswordForm input,
#recoveryPhraseSetupForm input,
#deleteAccountForm input,
#pageForm input,
#reminderForm input,
#newsPanelForm input {

    width:100%;

    background:var(--bg);

    color:var(--text);

    border:1px solid var(--border-input);

    border-radius:8px;

    padding:12px;

    font-size:16px;
}

#addLinkForm input:focus,
#addLinkForm select:focus,
#addSectionForm input:focus,
#sectionPinForm input:focus,
#accountPasswordForm input:focus,
#recoveryPhraseSetupForm input:focus,
#deleteAccountForm input:focus,
#pageForm input:focus,
#reminderForm input:focus,
#newsPanelForm input:focus {

    outline:none;

    border-color:var(--accent-bright);
}

#newSectionFields{

    display:flex;

    flex-direction:column;

    gap:10px;
}

#newSectionFields[hidden]{

    display:none;
}

.tiles:empty::before{

    content:"No links yet — use + Add Link";

    color:var(--text-dim);

    font-size:14px;

    padding:4px 2px;

    grid-column:1 / -1;
}

.dialogActions {

    display:flex;

    justify-content:flex-end;

    gap:10px;

    margin-top:12px;
}

.dialogActions button {

    flex:0 0 auto;
}

button.secondary {

    background:var(--btn);
}

button.secondary:hover {

    background:var(--border-input);
}

button.dangerButton{

    background:var(--danger);

    color:#fff;
}

button.dangerButton:hover{

    background:var(--danger-soft);
}

.exportDeleteBody{

    display:flex;

    flex-direction:column;

    gap:18px;

    padding:24px;

    max-width:min(440px, 100%);
}

.exportDeleteBody > h2{

    margin:0;

    color:var(--accent);

    font-size:1.2rem;
}

.exportDeleteSection{

    display:flex;

    flex-direction:column;

    gap:10px;

    padding-top:4px;
}

.exportDeleteDanger{

    padding-top:16px;

    border-top:1px solid var(--border);
}

.exportDeleteHeading{

    margin:0;

    font-family:"Outfit",Segoe UI,sans-serif;

    font-size:0.95rem;

    font-weight:650;

    color:var(--text);
}

.exportDeleteDanger .exportDeleteHeading{

    color:var(--warn);
}

#deleteAccountForm{

    display:flex;

    flex-direction:column;

    gap:10px;
}

#exportBookmarksFromDialogButton{

    align-self:flex-start;

    padding:10px 14px;

    border:none;

    border-radius:8px;

    background:var(--accent-hover);

    color:var(--on-accent);

    font-size:14px;

    font-weight:600;

    cursor:pointer;
}

#exportBookmarksFromDialogButton:hover{

    background:var(--accent);
}