.newtab-home { z-index: 1; display: block; overflow: auto; background: radial-gradient(ellipse at 50% 20%, color-mix(in srgb, var(--lime) 7%, transparent), transparent 65%), var(--bg); }
.newtab-content { width: min(720px, 100%); min-height: 100%; margin: auto; padding: clamp(35px, 7vh, 80px) 24px 40px; text-align: center; }
.newtab-content h2 { margin-top: 20px; font-size: clamp(48px, 8vw, 86px); line-height: 1; }
.newtab-tagline { margin-top: 14px; color: var(--muted); font-size: 14px; }
.newtab-home .newtab-search { width: 100%; height: 58px; margin: 30px 0; padding: 5px 6px 5px 16px; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--line); }
.newtab-search > svg { width: 18px; flex-shrink: 0; color: var(--muted); }
.newtab-home .newtab-search input { min-width: 0; width: 100%; padding: 0; font-size: 14px; }
.newtab-home .newtab-search button { display: grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; background: var(--lime); color: var(--bg); cursor: pointer; }
.newtab-shortcut-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.newtab-home .newtab-shortcut-heading h3 { margin: 0; font-size: 14px; }
.newtab-shortcut-heading button { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border: 1px solid var(--line); background: var(--surface); color: var(--text); cursor: pointer; font-size: 12px; }
.newtab-shortcut-heading svg { width: 14px; height: 14px; }
.newtab-shortcuts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.newtab-shortcut { min-width: 0; border: 1px solid var(--line); background: var(--surface); }
.shortcut-launch { width: 100%; padding: 20px 10px 12px; display: flex; flex-direction: column; align-items: center; border: 0; background: transparent; color: var(--text); cursor: pointer; }
.shortcut-mark { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 12px; background: color-mix(in srgb, var(--lime) 12%, transparent); color: var(--lime); font: 700 22px "Space Grotesk", sans-serif; }
.shortcut-launch strong { max-width: 100%; font-size: 13px; overflow-wrap: anywhere; }
.shortcut-launch small { margin-top: 5px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; color: var(--muted); font-size: 10px; }
.shortcut-edit { width: 100%; padding: 8px; border: 0; border-top: 1px solid var(--line); background: transparent; color: var(--muted); font-size: 11px; cursor: pointer; }
.shortcut-launch:hover, .shortcut-edit:hover { background: #ffffff08; color: var(--lime); }
.newtab-hint, .shortcuts-empty { margin-top: 20px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.shortcuts-empty { grid-column: 1 / -1; margin: 10px 0; padding: 20px; border: 1px dashed var(--line); }
.shortcut-editor { position: fixed; inset: 0; width: min(440px, calc(100% - 32px)); max-height: calc(100% - 32px); margin: auto; padding: 28px; border: 1px solid var(--line); background: var(--surface); color: var(--text); box-shadow: 0 24px 90px #0008; }
.shortcut-editor::backdrop { background: #000a; backdrop-filter: blur(5px); }
.shortcut-editor h2 { margin-bottom: 24px; font-size: 26px; }
.shortcut-editor label { display: block; margin: 16px 0 8px; font-size: 13px; }
.shortcut-editor input { width: 100%; padding: 12px; border: 1px solid var(--line); background: var(--bg); color: var(--text); }
.shortcut-error { margin-top: 14px; color: #ff9b9b; font-size: 12px; line-height: 1.5; }
.shortcut-editor-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 22px; }
.shortcut-editor-actions button { padding: 10px 12px; border: 1px solid var(--line); background: transparent; color: var(--text); cursor: pointer; font-size: 12px; }
.shortcut-editor-actions .shortcut-save { background: var(--lime); color: var(--bg); border-color: var(--lime); font-weight: 700; }
#delete-shortcut { margin-right: auto; color: #ff9b9b; }
.newtab-home button:focus-visible, .newtab-home input:focus-visible, .shortcut-editor :is(button, input):focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }
@media (max-width: 540px) { .newtab-content { padding-inline: 16px; } .newtab-shortcuts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }