/* ICS Maker - page-specific styles. Uses tokens from styles.css */


.tool-card.ics{
background: var(--card);
border: 1px solid rgba(255,255,255,.08);
border-radius: 16px;
padding: 1.25rem;
box-shadow: 0 6px 20px rgba(0,0,0,.18);
}


.ics-layout{
display:grid;
grid-template-columns: minmax(0,1fr) 380px;
gap:1.25rem;
align-items:start;
}
@media (max-width: 1100px){ .ics-layout{ grid-template-columns: 1fr; } }


.section{ margin-bottom:1.25rem; padding-bottom:1.25rem; border-bottom:1px solid rgba(255,255,255,.08); }
.section:last-child{ border-bottom:0; }
.section h2{ font-size:1.1rem; font-weight:800; margin:0 0 .75rem; color:var(--text); }


.row, .row-3{ display:grid; gap:.75rem; }
.row{ grid-template-columns: 1fr 1fr; }
.row-3{ grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 800px){ .row, .row-3{ grid-template-columns: 1fr; } }


.field{ display:flex; flex-direction:column; }
.label{ margin:.25rem 0 .35rem; color:var(--text); font-weight:700; }


.control{
display:block; width:100%;
padding:.65rem .7rem; margin:0 0 .2rem;
background:rgba(255,255,255,.04); color:var(--text);
border:1px solid rgba(255,255,255,.12); border-radius:10px;
}
select.control{ background-image:none; }
.num{ text-align:center; font-variant-numeric: tabular-nums; font-weight:800; }


/* Ensure options in selects are legible in dark theme (Windows + Chrome/Edge) */
select.control option { background-color: var(--card); color: var(--text); }


.actions{ display:flex; flex-wrap:wrap; gap:.6rem; justify-content:flex-start; margin-top:1rem; }
.actions .btn{
background: var(--blue);
color: #fff;
font-weight: 800;
padding:.8rem 1rem;
border-radius:10px;
box-shadow:0 6px 14px rgba(14,118,188,.25);
}
.actions .btn:hover{ filter:brightness(1.08); }


/* Drag/drop import area */
.import-drop{
border:2px dashed rgba(255,255,255,.18);
border-radius:12px;
padding:1rem;
text-align:center;
color: var(--muted);
cursor:pointer;
transition: background .2s ease;
}
.import-drop:hover{ background: rgba(255,255,255,.03); }
.import-drop.active{ border-color: var(--blue); color: var(--text); }


/* Advanced accordion */
.advanced-toggle{ cursor:pointer; font-weight:700; margin:.5rem 0; color: var(--muted); }
.advanced-toggle:hover{ color: var(--text); }
.advanced{ display:none; margin-top:.75rem; }
.advanced.open{ display:block; }


/* Utilities */
.hidden{ display:none !important; }
.kicker{ color: var(--muted); font-weight:800; text-transform:uppercase; letter-spacing:.08em; font-size:.85rem; }
.tip-box{ margin-top:.5rem; padding:.75rem; border:1px dashed rgba(255,255,255,.18); border-radius:10px; }