/* CSSTidy 2.0.3: Sun, 09 Nov 2025 13:25:55 -0600 */
:root {
--bg-primary:#1c1c1e;
--bg-secondary:#2c2c2e;
--bg-tertiary:#3a3a3c;
--border-color:#444;
--border-radius:8px;
--font-mono:'SF Mono','Fira Code',Consolas,monospace;
--font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
--text-highlight:#fff;
--text-primary:#e0e0e0;
--text-secondary:#a0a0a0
}

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

body {
align-items:center;
background-color:var(--bg-primary);
color:var(--text-primary);
display:flex;
font-family:var(--font-sans);
justify-content:center;
min-height:100vh;
padding:20px;
text-align:center
}

.container {
max-width:800px;
width:100%
}

header {
margin-bottom:4rem
}

#greeting {
color:var(--text-highlight);
font-size:2.5rem;
font-weight:600;
margin-bottom:1rem
}

#clock {
color:var(--text-highlight);
font-family:var(--font-mono);
font-size:5rem;
font-weight:300;
text-shadow:0 0 5px #ffffff1a
}

#date {
color:var(--text-secondary);
font-size:1.2rem;
font-weight:400;
margin-top:.5rem
}

#weather-container {
color:var(--text-primary);
font-size:1.1rem;
margin-top:1.5rem;
position:relative
}

#weather {
cursor:pointer;
user-select:none
}

#weekly-forecast {
background-color:var(--bg-secondary);
border-radius:var(--border-radius);
display:none;
margin-top:1rem;
padding:.5rem 1rem;
text-align:left
}

#weekly-forecast.visible {
display:block
}

.forecast-day {
align-items:left;
border-bottom:1px solid var(--bg-tertiary);
display:flex;
justify-content:space-between;
padding:.75rem 0
}

.forecast-day:last-child {
border-bottom:none
}

.forecast-day .day-name {
flex-basis:50px;
font-weight:500
}

.forecast-day .day-icon {
font-size:1rem
}

.forecast-day .day-temp {
flex-basis:100px;
font-family:var(--font-mono);
text-align:left
}

.forecast-day .day-rain {
color:var(--text-secondary);
flex-basis:80px;
text-align:left;
white-space:nowrap
}

#weather-icon {
cursor:help;
font-size:1em;
vertical-align:middle
}

#location-display {
color:var(--text-secondary);
font-weight:500;
margin-top:.5rem
}

#search-form {
margin-top:2rem;
width:100%
}

#search-input {
background-color:var(--bg-secondary);
border:1px solid var(--border-color);
border-radius:var(--border-radius);
color:var(--text-primary);
font-size:1rem;
padding:12px 16px;
transition:border-color .2s ease;
width:100%
}

#search-input::placeholder {
color:var(--text-secondary)
}

#search-input:focus {
border-color:var(--text-highlight);
outline:none
}

main h2 {
color:var(--text-secondary);
font-size:1.25rem;
font-weight:500;
margin-bottom:2rem
}

#links-list {
display:grid;
gap:1rem;
grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
list-style-type:none;
margin:0;
padding:0
}

#links-list li a {
align-items:center;
background-color:var(--bg-secondary);
border-radius:var(--border-radius);
color:var(--text-primary);
display:flex;
font-weight:500;
gap:.75rem;
overflow:hidden;
padding:1rem;
position:relative;
text-decoration:none;
transition:transform 180ms ease,box-shadow 180ms ease,background-color 180ms ease,filter 180ms ease;
will-change:transform
}

.link-favicon {
border-radius:4px;
flex:none;
height:20px;
object-fit:contain;
opacity:.3;
transition:opacity 180ms ease,transform 180ms ease;
width:20px;
z-index:1
}

#links-list li a .link-overlay {
border-radius:inherit;
inset:0;
pointer-events:none;
position:absolute;
transition:filter 180ms ease,opacity 180ms ease;
z-index:0
}

#links-list li a:hover {
box-shadow:0 5px 10px #00000073;
color:var(--text-highlight);
filter:brightness(1.08);
transform:translateY(-3px)
}

#links-list li a:hover .link-favicon {
opacity:.6;
transform:scale(1.06)
}

#links-list li.dragging {
opacity:.45;
transform:scale(0.98)
}

#links-list li.drag-over {
box-shadow:0 6px 18px #00000047;
outline:2px dashed #ffffff14
}

#settings-btn {
align-items:center;
background:var(--bg-secondary);
border:1px solid #ffffff0a;
border-radius:10px;
box-shadow:0 4px 12px #0000004d;
color:var(--text-primary);
cursor:pointer;
display:inline-flex;
font-size:18px;
height:42px;
justify-content:center;
padding:0;
transition:background-color 140ms ease,color 140ms ease,transform 140ms ease,box-shadow 140ms ease,filter 140ms ease;
width:42px
}

#settings-btn:hover,.bottom-controls button:hover {
box-shadow:0 6px 18px #00000047;
filter:brightness(1.06)
}

#overlay {
background-color:#00000080;
display:none;
height:100%;
left:0;
opacity:0;
position:fixed;
top:0;
transition:opacity .3s ease-in-out;
width:100%;
z-index:1200
}

#overlay.active {
display:block;
opacity:.5
}

.sidebar {
background-color:var(--bg-primary);
box-shadow:-2px 0 15px #00000080;
color:var(--text-primary);
height:100%;
overflow-y:auto;
padding:20px;
position:fixed;
right:-350px;
top:0;
transition:right .3s ease-in-out;
width:350px;
z-index:1202
}

.sidebar.open {
right:0;
z-index:1202
}

.bottom-controls {
align-items:center;
bottom:18px;
display:flex;
gap:8px;
position:fixed;
right:18px;
z-index:1199
}

.sidebar h2 {
color:var(--text-highlight);
font-size:1.5rem;
margin-bottom:2rem;
text-align:left
}

.settings-section {
border-top:1px solid var(--bg-tertiary);
margin-top:2.5rem;
padding-top:1.5rem;
text-align:left
}

.settings-section h3 {
color:var(--text-secondary);
font-size:1rem;
font-weight:500;
margin-bottom:1rem
}

.sidebar form label {
display:block;
font-weight:500;
margin-bottom:.5rem
}

.sidebar form input[type="text"],.sidebar form input[type="url"] {
background-color:var(--bg-secondary);
border:1px solid var(--border-color);
border-radius:var(--border-radius);
color:var(--text-primary);
font-size:1rem;
margin-bottom:10px;
padding:10px 12px;
width:100%
}

.sidebar form input::placeholder {
color:var(--text-secondary)
}

.sidebar form button,.settings-btn-full {
background-color:var(--bg-tertiary);
border:1px solid var(--border-color);
border-radius:var(--border-radius);
color:var(--text-primary);
cursor:pointer;
display:block;
font-size:1rem;
font-weight:500;
margin-top:.5rem;
padding:12px;
text-align:center;
transition:background-color .2s ease;
width:100%
}

.sidebar form button:hover,.settings-btn-full:hover {
background-color:#4a4a4c
}

.import-label {
margin-bottom:10px
}

#sidebar-links-list {
list-style:none;
margin-bottom:1.5rem
}

#sidebar-links-list li {
align-items:center;
background-color:var(--bg-secondary);
border-radius:var(--border-radius);
display:flex;
justify-content:space-between;
margin-bottom:8px;
padding:10px 15px
}

.sidebar .edit-link-btn,.sidebar .remove-link-btn {
background:none;
border:1px solid var(--border-color);
border-radius:6px;
color:var(--text-primary);
cursor:pointer;
font-size:.9rem;
margin-left:6px;
padding:6px 8px
}

.sidebar .edit-link-btn:hover {
background:var(--bg-tertiary)
}

#cancel-edit-btn {
background-color:#7a7a7a;
border:1px solid var(--border-color);
border-radius:var(--border-radius);
color:var(--text-primary);
cursor:pointer;
padding:10px
}

#cancel-edit-btn:hover {
background-color:#6a6a6a
}

.debug-info {
background-color:#000000b3;
border-radius:8px;
color:#fff;
display:none;
font-size:.8rem;
left:50%;
padding:10px 15px;
position:fixed;
top:10px;
transform:translateX(-50%);
z-index:2000
}

.debug-info.active {
display:block
}

.debug-info p {
line-height:1.4;
margin:0
}

.debug-info .close-debug {
color:#fff;
cursor:pointer;
font-size:1.2rem;
position:absolute;
right:8px;
top:5px;
transition:color .2s ease
}

.debug-info .close-debug:hover {
color:#ff453a
}

.bottom-controls {
align-items:center;
bottom:18px;
display:flex;
gap:8px;
position:fixed;
right:18px;
z-index:1199
}

.bottom-controls button {
align-items:center;
background:var(--bg-secondary);
border:1px solid #fff0;
border-radius:10px;
box-shadow:0 4px 12px #0000004d;
color:var(--text-primary);
cursor:pointer;
display:inline-flex;
height:42px;
justify-content:center;
padding:0;
transition:background-color 140ms ease,color 140ms ease,transform 140ms ease,box-shadow 140ms ease,filter 140ms ease;
width:42px
}

#toggle-links-btn svg {
display:block;
height:18px;
stroke-width:1.8;
width:18px
}

#toggle-links-btn[aria-pressed="false"] {
background:#ffffff08;
color:var(--text-secondary)
}

.links-hidden #links-list,.links-hidden .links-placeholder {
display:none
}

.links-hidden .links-hidden-note {
color:var(--text-secondary);
display:block;
font-size:.95rem;
margin-top:1rem;
opacity:.95;
text-align:center
}

.links-hidden-note {
display:none
}

.sidebar .close-btn {
-webkit-appearance:none;
align-items:center;
appearance:none;
background:var(--bg-secondary);
border:0 solid var(--border-color);
border-radius:8px;
color:var(--text-primary);
cursor:pointer;
display:inline-flex;
font-size:24px;
height:36px;
justify-content:center;
line-height:1;
position:absolute;
right:12px;
top:12px;
transition:background-color 140ms ease,transform 140ms ease,filter 140ms ease,box-shadow 140ms ease;
width:36px;
z-index:1300
}

.sidebar .close-btn:active {
filter:brightness(0.98)
}

.sidebar .close-btn:hover {
background:var(--bg-tertiary);
box-shadow:0 6px 18px #00000040;
filter:brightness(1.06)
}

.sidebar .close-btn:focus {
outline:2px solid #ffffff14;
outline-offset:2px
}

.sidebar .close-btn svg,.sidebar .close-btn span {
color:inherit
}