:root {
    color-scheme: light dark;
    font-family: 'Roboto';
    --md-sys-color-primary: rgb(255 181 155);
    --md-sys-color-surface-tint: rgb(255 181 155);
    --md-sys-color-on-primary: rgb(85 32 11);
    --md-sys-color-primary-container: rgb(114 53 31);
    --md-sys-color-on-primary-container: rgb(255 219 207);
    --md-sys-color-secondary: rgb(231 189 176);
    --md-sys-color-on-secondary: rgb(68 42 33);
    --md-sys-color-secondary-container: rgb(93 64 54);
    --md-sys-color-on-secondary-container: rgb(255 219 207);
    --md-sys-color-tertiary: rgb(213 198 142);
    --md-sys-color-on-tertiary: rgb(57 48 5);
    --md-sys-color-tertiary-container: rgb(81 70 26);
    --md-sys-color-on-tertiary-container: rgb(242 226 167);
    --md-sys-color-error: rgb(255 180 171);
    --md-sys-color-on-error: rgb(105 0 5);
    --md-sys-color-error-container: rgb(147 0 10);
    --md-sys-color-on-error-container: rgb(255 218 214);
    --md-sys-color-background: rgb(26 17 15);
    --md-sys-color-on-background: rgb(241 223 217);
    --md-sys-color-surface: rgb(26 17 15);
    --md-sys-color-on-surface: rgb(241 223 217);
    --md-sys-color-surface-variant: rgb(83 67 62);
    --md-sys-color-on-surface-variant: rgb(216 194 187);
    --md-sys-color-outline: rgb(160 141 134);
    --md-sys-color-outline-variant: rgb(83 67 62);
    --md-sys-color-shadow: rgb(0 0 0);
    --md-sys-color-scrim: rgb(0 0 0);
    --md-sys-color-inverse-surface: rgb(241 223 217);
    --md-sys-color-inverse-on-surface: rgb(57 46 43);
    --md-sys-color-inverse-primary: rgb(143 76 52);
    --md-sys-color-primary-fixed: rgb(255 219 207);
    --md-sys-color-on-primary-fixed: rgb(56 13 0);
    --md-sys-color-primary-fixed-dim: rgb(255 181 155);
    --md-sys-color-on-primary-fixed-variant: rgb(114 53 31);
    --md-sys-color-secondary-fixed: rgb(255 219 207);
    --md-sys-color-on-secondary-fixed: rgb(44 22 13);
    --md-sys-color-secondary-fixed-dim: rgb(231 189 176);
    --md-sys-color-on-secondary-fixed-variant: rgb(93 64 54);
    --md-sys-color-tertiary-fixed: rgb(242 226 167);
    --md-sys-color-on-tertiary-fixed: rgb(34 27 0);
    --md-sys-color-tertiary-fixed-dim: rgb(213 198 142);
    --md-sys-color-on-tertiary-fixed-variant: rgb(81 70 26);
    --md-sys-color-surface-dim: rgb(26 17 15);
    --md-sys-color-surface-bright: rgb(66 55 51);
    --md-sys-color-surface-container-lowest: rgb(20 12 10);
    --md-sys-color-surface-container-low: rgb(35 26 22);
    --md-sys-color-surface-container: rgb(39 29 26);
    --md-sys-color-surface-container-high: rgb(50 40 36);
    --md-sys-color-surface-container-highest: rgb(61 50 47);
}

body {
    font-family: var(--md-ref-typeface-plain);
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    background-color: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);
}

.container {
    background-color: var(--md-sys-color-surface);
    padding: 20px;
    border-radius: 16px;
}

.feed-input {
    display: flex;
    gap: 16px;
    margin-bottom: 20px;
    align-items: center;
}

.feed-input md-outlined-text-field {
    flex-grow: 1;
}

.feed-content {
    max-height: 500px;
    overflow-y: auto;
    margin-bottom: 20px;
}

.feed-item {
    border-bottom: 1px solid var(--md-sys-color-surface-variant);
    padding: 16px 0;
    position: relative;
}

.feed-item-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.feed-item-name {
    font-weight: 500;
    flex-grow: 1;
    margin-right: 10px;
    color: var(--md-sys-color-on-surface-variant);
}

.feed-star {
    cursor: pointer;
    color: var(--md-sys-color-outline);
    font-size: 24px;
    user-select: none;
    transition: color 0.3s ease;
}

.feed-star.starred {
    color: #FFD700;
}

.feed-item-link {
    color: var(--md-sys-color-outline);
    font-size: 0.8em;
    display: none;
    margin-bottom: 8px;
}

.feed-item:hover .feed-item-link {
    display: block;
}

.saved-feeds ul {
    list-style-type: none;
    padding: 0;
}

.saved-feeds li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--md-sys-color-surface-variant);
}

.delete-feed {
    color: var(--md-sys-color-error);
    cursor: pointer;
}

.feed-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--md-sys-color-surface-variant);
    padding-bottom: 10px;
    gap: 16px;
}

.feed-header .feed-item-name {
    flex-grow: 1;
    margin-right: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.feed-header .feed-item-link {
    display: block;
    margin-right: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 300px;
    color: var(--md-sys-color-outline);
    font-size: 0.8em;
}

.feed-header .feed-star {
    flex-shrink: 0;
}

/* Material Design 3 Component Overrides */
md-outlined-text-field {
    --md-outlined-text-field-container-shape: 8px;
}

md-filled-button, md-filled-tonal-button {
    --md-filled-button-container-shape: 8px;
    --md-filled-tonal-button-container-shape: 8px;
}

md-dialog {
    --md-dialog-container-shape: 28px;
}

md-dialog::part(headline) {
    color: var(--md-sys-color-on-surface);
}

md-dialog::part(content) {
    color: var(--md-sys-color-on-surface-variant);
}

md-dialog md-icon-button[slot="close"] {
    position: absolute;
    top: 16px;
    right: 16px;
}