/* Palette & tokens (matching work-time feel) */
:root{
  --fg:#e8eaf6;
  --muted:#a9acc7;
  --card:#151935;
  --line:#242a52;
  --accent:#7c8cff;
  --ok:#27ae60;
  --danger:#ff6b6b;
}

/* Typography & basics */
*{box-sizing:border-box}
.am-hero,.am-grid{color:var(--fg); font-family:Inter,system-ui,Segoe UI,Roboto,Arial}

/* Hero (same mood as work-time header card) */
.am-hero{
  margin:0 0 14px 0;
  padding:20px 16px;
  border-radius:14px;
  background:linear-gradient(135deg,#12162d 0%, #0f1430 100%);
  border:1px solid var(--line);
  text-align:center;
}
.am-hero h1{margin:0; font-size:2rem; color:var(--accent)}

/* Grid & Card (mirrors .wth-grid / .wth-card) */
.am-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:14px}
.am-card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:14px;
  padding:16px;
  box-shadow:0 2px 6px rgba(0,0,0,.25);
  transition:transform .18s ease;
  max-width:820px;
  margin:0 auto;
}
.am-card:hover{transform:translateY(-4px)}

/* Safari alert pill (like info pill) */
.am-safari-alert{
  display:flex; align-items:center; justify-content:center; gap:8px;
  margin-top:12px; padding:10px 12px;
  background:#141736; border:1px solid var(--line); border-radius:12px;
  color:var(--accent);
}
.am-safari-alert[hidden]{display:none}
.am-safari-alert svg{width:18px; height:18px}

/* Form controls (align with work-time) */
#am-form{width:100%}
.am-label-row{display:flex; align-items:center; gap:8px; margin-bottom:6px}
#am-form label{font-size:13px; color:var(--muted)}
#am-form input[type="text"],
#am-form textarea{
  width:100%;
  padding:12px;
  border-radius:10px;
  border:1px solid #2a2f4a;
  background:#0f1430;
  color:var(--fg);
  font-size:14px;
  margin-bottom:14px;
}
#am-form input::placeholder, #am-form textarea::placeholder{color:var(--muted)}
#am-form input[type="file"]{color:var(--fg); margin-bottom:12px}
.am-hint{display:block; margin:-8px 0 12px; color:var(--muted); font-size:12px}

/* Switches (same sizing as work-time style) */
.am-switch-wrap{display:flex; align-items:center; justify-content:flex-start; margin-bottom:14px}
.am-switch-label{font-size:13px; color:var(--muted)}
.am-switch{position:relative; width:46px; height:26px}
.am-switch input{opacity:0; width:0; height:0}
.am-slider{
  position:absolute; inset:0; cursor:pointer; border-radius:34px; background:#555; transition:.2s;
}
.am-slider:before{
  content:""; position:absolute; height:20px; width:20px; left:3px; bottom:3px;
  background:#fff; border-radius:50%; transition:.2s;
}
.am-switch input:checked + .am-slider{background:#4caf50}
.am-switch input:checked + .am-slider:before{transform:translateX(20px)}

/* Buttons (accent like work-time) */
.am-submit, .am-btn{
  width:100%;
  border:0; border-radius:12px; padding:12px 14px;
  background:var(--accent); color:#fff; cursor:pointer;
  font-size:14px; transition:filter .15s ease;
}
.am-submit:hover, .am-btn:hover{filter:brightness(1.08)}
.am-btn-primary{background:var(--ok)}
.am-btn-danger{background:var(--danger)}

/* Tooltip (hover for desktop; click modal handled in JS) */
.am-tip{position:relative; display:inline-block; margin-right:4px; cursor:pointer}
.am-tip-icon{
  display:inline-block; width:18px; height:18px; line-height:18px;
  background:var(--accent); color:#fff; border-radius:50%; font-size:12px; text-align:center;
}
.am-tip-text{
  position:absolute; bottom:125%; left:50%; transform:translateX(-50%);
  width:220px; padding:8px; border-radius:8px;
  background:#141736; border:1px solid var(--line); color:var(--fg);
  box-shadow:0 2px 8px rgba(0,0,0,.3);
  font-size:12px; line-height:1.25;
  visibility:hidden; opacity:0; transition:opacity .15s;
  z-index:5;
}
.am-tip:hover .am-tip-text{visibility:visible; opacity:1}
.am-tip-text::after{
  content:""; position:absolute; top:100%; left:50%; margin-left:-6px;
  border-width:6px; border-style:solid; border-color:#141736 transparent transparent transparent;
}

/* Modal (same rounded cards style) */
.am-modal{
  display:none; position:fixed; inset:0; z-index:50;
  background:rgba(0,0,0,.55);
  align-items:center; justify-content:center; padding:16px;
}
.am-modal-card{
  background:var(--card); color:var(--fg);
  border:1px solid var(--line); border-radius:14px;
  max-width:360px; width:100%; padding:16px;
  box-shadow:0 4px 14px rgba(0,0,0,.6); text-align:center;
}
.am-modal-actions{display:flex; gap:8px; margin-top:10px}
.am-modal .am-btn{width:auto; min-width:120px}

/* Responsive tweaks */
@media (max-width:480px){
  .am-hero h1{font-size:1.6rem}
  .am-tip-text{width:180px}
}