css4

video::backdrop {
    background: linear-gradient(135deg, #1a1a2e, #16213e);
}
dialog::backdrop {
    background: rgba(0,0,0,0.8);
    backdrop-filter: blur(5px);
}

input::placeholder {
    color: #e74c3c;
    font-style: italic;
    font-size: 0.9em;
}
textarea::placeholder {
    color: #3498db;
    letter-spacing: 1px;
}

input::file-selector-button {
    background: #2c3e66;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
}
input::file-selector-button:hover {
    background: #1a2a4a;
}

custom-element::part(button) {
    background: #3498db;
    border-radius: 8px;
}

video::cue {
    background: rgba(0,0,0,0.7);
    color: #f1c40f;
    font-size: 1.2em;
}
video::cue(.speaker1) {
    color: #3498db;
}

article:has(img) {
    background: #e8f4fd;
    padding: 15px;
    border-radius: 8px;
}
li:has(ul) {
    font-weight: bold;
}

button:not(.primary) {
    background: #95a5a6;
}
input:not([type="submit"]) {
    border: 1px solid #ccc;
}

:is(header, main, footer) p {
    margin: 1em 0;
}
:is(.card, .article) :is(h2, h3) {
    color: #2c3e66;
}

:where(.reset, .base) p {
    margin: 0;
    padding: 0;
}

.parent :scope {
    border-left: 3px solid #3498db;
    padding-left: 10px;
}

p:lang(fr) {
    quotes: "«" "»";
}
p:lang(en) {
    quotes: "“" "”";
}
html:lang(ar) {
    direction: rtl;
}

:dir(ltr) {
    text-align: left;
}
:dir(rtl) {
    text-align: right;
}

a:local-link {
    text-decoration: underline;
    font-weight: bold;
}
a:local-link:hover {
    background: #f9e79f;
}

section:target-within {
    background: #d5f5e3;
    border-left: 4px solid #2ecc71;
}

video:playing {
    border: 2px solid #2ecc71;
}
video:paused {
    opacity: 0.8;
}
audio:playing {
    box-shadow: 0 0 10px #3498db;
}

video:fullscreen {
    width: 100vw;
    height: 100vh;
    object-fit: contain;
}
:fullscreen {
    background: black;
}

video:picture-in-picture {
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

input:autofill {
    background: linear-gradient(to right, #f9e79f, #f9e79f);
    background-attachment: fixed;
}

input:user-valid {
    border-color: #2ecc71;
    background: #d5f5e3;
}

input:user-invalid {
    border-color: #e74c3c;
    background: #fdebd0;
}

component:has-slotted(img) {
    border: 2px solid #3498db;
}

toggle-switch:state(checked) {
    background: #2ecc71;
}
accordion-item:state(expanded) {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

table :nth-col(2) {
    background: #e8f4fd;
}
.grid :nth-col(odd) {
    background: #f8f9fa;
}

table :nth-last-col(2) {
    background: #fdebd0;
}

.popover-content:popover-open {
    animation: fadeIn 0.3s ease;
    border: none;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}