:root{
--dps-orange:#f57c00;
--dps-green:#1b5e20;
}

/* Mobile Controls */
.dps-mobile-controls{
display:none;
gap:12px;
margin-bottom:20px;
flex-wrap:wrap;
width:100%;
}

.dps-search-input{
flex:1;
padding:10px 14px;
border:1px solid #ddd;
border-radius:8px;
font-size:14px;
}

.dps-filter-select{
padding:10px 12px;
border:1px solid #ddd;
border-radius:8px;
font-size:14px;
background:#fff;
cursor:pointer;
}

.dps-search-input:focus,
.dps-filter-select:focus{
outline:none;
border-color:var(--dps-orange);
box-shadow:0 0 0 2px rgba(245,124,0,.1);
}

.dps-notice-desktop{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:28px;
}

.dps-col{
background:#fff;
border-radius:18px;
box-shadow:0 10px 30px rgba(0,0,0,.08);
overflow:hidden;
transition:transform 0.2s ease;
position:relative;
}

/* Scroll indicator for more content */
.dps-col::after{
content:'';
position:absolute;
bottom:0;
left:0;
right:0;
height:8px;
background:linear-gradient(to bottom, transparent, rgba(245,124,0,0.1));
pointer-events:none;
z-index:10;
}

.dps-col-header{
background-color:#c9a24d !important;
color:#fff;
font-size:20px;
font-weight:600;
padding:14px 18px;
display:flex;
justify-content:space-between;
align-items:center;
}

.dps-col-header span:first-child{
color:#ffffff !important;
}

.dps-badge{
background-color:#ffffff !important;
color:#0f5132 !important;
width:20px;
height:20px;
line-height:20px;
border-radius:50% !important;
text-align:center;
font-size:12px;
font-weight:600;
padding:0 !important;
display:inline-flex;
align-items:center;
justify-content:center;
}

/* Pinned items holder (fixed below header) */
.dps-pinned-holder{
position:relative;
z-index:10;
background:#fafafa;
min-height:0;
}

.dps-pinned-holder:not(:empty){
border-bottom:1px solid #eee;
}

.dps-pinned-list{
list-style:none;
margin:0;
padding:0;
display:flex;
flex-direction:column;
}

.dps-col-body{
height:280px;
overflow:hidden !important;
overflow-x:hidden;
-webkit-overflow-scrolling:touch;
position:relative;
user-select:none;
-webkit-user-select:none;
background:#fafafa;
scroll-behavior:smooth;
}

.dps-col-list{
list-style:none;
margin:0;
padding:0;
will-change:transform;
display:flex;
flex-direction:column;
}

/* Inner scroll wrapper (animates) */
.dps-scroll-inner{
display:flex;
flex-direction:column;
will-change:transform;
}

.dps-item{
padding:12px 12px;
border-bottom:1px solid #eee;
cursor:pointer;
transition:background 0.15s ease, box-shadow 0.15s ease;
position:relative;
flex-shrink:0;
min-height:60px;
display:flex;
flex-direction:column;
justify-content:center;
outline:none;
-webkit-tap-highlight-color:transparent;
}

.dps-item:hover{
background:#f0f0f0;
box-shadow:inset 0 0 0 1px rgba(245,124,0,0.1);
}

.dps-item:active{
background:#e8e8e8;
}

.dps-item:focus{
outline:2px solid var(--dps-orange);
outline-offset:-2px;
}

.dps-item[tabindex]:focus-visible{
outline:2px solid var(--dps-orange);
outline-offset:-2px;
background:#f0f0f0;
}

.dps-item.dps-featured{
background:#fffbf0;
border-left:4px solid var(--dps-orange);
padding-left:10px;
}

.dps-pin-icon{
margin-right:8px;
font-size:14px;
}

.dps-date{
color:var(--dps-green);
font-weight:600;
display:block;
margin-bottom:4px;
font-size:12px;
}

.dps-title{
display:block;
font-weight:500;
color:#333;
}

.dps-empty{
text-align:center;
color:#999;
padding:40px 20px;
font-size:14px;
}

.dps-popup-overlay{
position:fixed;
inset:0;
background:rgba(0,0,0,.6);
display:flex;
align-items:center;
justify-content:center;
z-index:99999;
padding:20px;
opacity:0;
visibility:hidden;
transition:opacity 0.3s ease, visibility 0.3s ease;
}

.dps-popup-overlay.active{
opacity:1;
visibility:visible;
}

.dps-popup{
background:#fff;
max-width:560px;
width:90%;
border-radius:18px;
padding:24px;
position:relative;
max-height:85vh;
overflow-y:auto;
box-shadow:0 20px 60px rgba(0,0,0,.3);
}

.dps-popup-overlay.active .dps-popup{
animation:slideUp 0.3s ease forwards;
}

@keyframes slideUp{
from{
opacity:0;
transform:translateY(20px);
}
to{
opacity:1;
transform:translateY(0);
}
}

.dps-popup-title{
margin:0 0 12px 0;
font-size:22px;
font-weight:600;
color:#333;
}

.dps-popup-date{
margin:0 0 16px 0;
color:var(--dps-green);
font-weight:600;
font-size:14px;
}

.dps-popup-content{
color:#666;
line-height:1.6;
}

.dps-popup-content p{
margin:0 0 12px 0;
}

.dps-popup-content img{
max-width:100%;
height:auto;
margin:12px 0;
border-radius:8px;
}

.dps-popup-content a{
color:var(--dps-orange);
text-decoration:none;
font-weight:500;
}

.dps-popup-content a:hover{
text-decoration:underline;
}

.dps-close{
position:absolute;
top:12px;
right:14px;
font-size:28px;
cursor:pointer;
color:#999;
transition:color 0.2s ease;
background:none;
border:none;
padding:0;
width:32px;
height:32px;
display:flex;
align-items:center;
justify-content:center;
-webkit-tap-highlight-color:transparent;
}

.dps-close:hover,
.dps-close:focus{
color:#333;
outline:2px solid var(--dps-orange);
outline-offset:2px;
}

/* Responsive Design */
@media(max-width:1024px){
.dps-notice-desktop{
grid-template-columns:repeat(2,1fr);
gap:20px;
}
}

@media(max-width:1024px){
.dps-notice-desktop{
grid-template-columns:repeat(2,1fr);
gap:20px;
}
}

@media(max-width:768px){
.dps-notice-desktop{
grid-template-columns:1fr;
gap:16px;
}

.dps-mobile-controls{
display:flex;
flex-wrap:wrap;
padding:0 4px;
}

.dps-search-input{
flex:1;
min-width:150px;
}

.dps-filter-select{
min-width:140px;
}

.dps-col{
margin-bottom:12px;
}

.dps-col-header{
font-size:16px;
padding:12px 14px;
gap:10px;
}

.dps-badge{
padding:3px 8px;
font-size:11px;
min-width:20px;
}

.dps-col-body{
height:220px;
touch-action:pan-y;
}

.dps-col-list{
padding:6px 0;
}

.dps-item{
padding:10px 12px;
font-size:14px;
min-height:50px;
}

.dps-date{
font-size:11px;
margin-bottom:2px;
}

.dps-title{
font-size:13px;
font-weight:500;
}

.dps-popup-overlay{
padding:10px;
}

.dps-popup{
padding:16px;
border-radius:14px;
width:95%;
}

.dps-popup-title{
font-size:18px;
margin-bottom:8px;
}

.dps-popup-date{
font-size:12px;
margin-bottom:12px;
}

.dps-popup-content{
font-size:13px;
line-height:1.5;
}

.dps-close{
top:8px;
right:8px;
width:28px;
height:28px;
font-size:24px;
}
}