:root{
  --bg:#0b0b10;
  --panel:rgba(255,255,255,.04);
  --panel2:rgba(255,255,255,.06);
  --border:rgba(255,255,255,.10);
  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.62);
  --muted2:rgba(255,255,255,.42);

  --red: #ff2d55;
  --violet:#a855f7;
  --green:#34d399;
  --yellow:#fbbf24;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial;
  background: var(--bg);
  color: var(--text);
  overflow-x:hidden;
}

/* subtle cyber glow */
.bg{
  position:fixed; inset:-20vh -20vw;
  background:
    radial-gradient(900px 600px at 12% 8%, rgba(255,45,85,.18), transparent 60%),
    radial-gradient(900px 600px at 88% 18%, rgba(168,85,247,.16), transparent 55%),
    radial-gradient(900px 600px at 50% 110%, rgba(168,85,247,.08), transparent 60%);
  filter: blur(16px);
  pointer-events:none;
  z-index:-1;
}

/* header */
.top{
  position:sticky; top:0; z-index:5;
  display:flex; align-items:center; justify-content:space-between;
  gap:16px;
  padding:16px 20px;
  border-bottom:1px solid var(--border);
  backdrop-filter: blur(10px);
  background: rgba(11,11,16,.55);
}

.brand{display:flex; align-items:center; gap:10px; min-width: 280px}
.dot{width:10px;height:10px;border-radius:999px;opacity:.95}
.dot-red{background:var(--red)}
.dot-yellow{background:var(--yellow)}
.dot-green{background:var(--green)}
.title{font-weight:700; letter-spacing:.2px}
.status{font-size:12px; color:var(--muted)}

/* ticker */
.ticker{
  flex:1;
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.ticker-label{font-size:12px; letter-spacing:.18em; color:var(--muted2)}
.ticker-window{
  flex:1; overflow:hidden; white-space:nowrap;
  border:1px solid var(--border);
  background: var(--panel);
  border-radius:14px;
  padding:8px 10px;
}
.ticker-track{
  display:inline-block;
  will-change: transform;
  animation: ticker 34s linear infinite;
}
@keyframes ticker{0%{transform:translateX(0)} 100%{transform:translateX(-50%)}}
.ticker-item{display:inline-flex; align-items:baseline; gap:10px; margin-right:28px; font-size:13px; color:var(--muted)}
.ticker-item a{color:var(--text); text-decoration:none}
.ticker-item a:hover{color: rgba(255,255,255,.98); text-decoration:underline}
.ticker-src{font-size:12px; color:var(--muted2)}

/* grid */
.grid{
  width:min(1200px, calc(100% - 36px));
  margin: 18px auto 28px;
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap:14px;
}

.card{
  grid-column: span 6;
  border:1px solid var(--border);
  background: linear-gradient(180deg, var(--panel2), var(--panel));
  border-radius:18px;
  padding:14px;
  box-shadow: 0 12px 40px rgba(0,0,0,.35);
}
.card.wide{grid-column: span 12}

.card-head{display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:12px}
.card h2{font-size:16px; font-weight:750; display:flex; align-items:center; gap:10px}
.hint{font-size:12px; color:var(--muted2)}

.drag-handle{
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px;
  border-radius:8px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.75);
  cursor: grab;
  user-select:none;
}

.module[draggable="true"]{cursor: grab}
.module.dragging{opacity:.55; transform: scale(.99)}
.module.drop-target{outline:2px dashed rgba(168,85,247,.65); outline-offset:4px}

/* rows / containers */
.list{display:flex; flex-direction:column; gap:10px}
.list{max-height: 320px; overflow:auto; padding-right:4px}
.row{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 12px; border-radius:14px; border:1px solid rgba(255,255,255,.09); background: rgba(0,0,0,.18)}
.left{min-width:0}
.name{font-weight:700; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.sub{font-size:12px; color:var(--muted2); margin-top:2px}
.badge{padding:5px 10px; border-radius:999px; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; border:1px solid rgba(255,255,255,.10)}
.badge.ok{background:rgba(52,211,153,.15); color:rgba(52,211,153,.95)}
.badge.bad{background:rgba(251,113,133,.16); color:rgba(251,113,133,.95)}
.badge.warn{background:rgba(251,191,36,.14); color:rgba(251,191,36,.95)}

/* weather */
.weather{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:10px 6px}
.big{font-size:44px; font-weight:900; letter-spacing:-.02em}
.meta{font-size:12px; color:var(--muted2); margin-top:4px}

/* chat */
.chat{height:240px; overflow:auto; border:1px solid rgba(255,255,255,.10); border-radius:14px; background: rgba(0,0,0,.20); padding:10px}
.msg{max-width:78%; padding:8px 10px; border-radius:12px; margin:8px 0; font-size:13px; line-height:1.35}
.msg.user{margin-left:auto; background: rgba(168,85,247,.18); border:1px solid rgba(168,85,247,.25)}
.msg.bot{background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10)}

.chatbar{display:flex; gap:10px; margin-top:10px}
.chatbar input{
  flex:1; border-radius:12px; padding:10px 12px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.28);
  color: var(--text);
}
.chatbar button{
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.07);
  color: var(--text);
  padding:10px 14px;
  font-weight:750;
  cursor:pointer;
}
.chatbar button:hover{background: rgba(255,255,255,.10)}

/* generic buttons (cards / header) */
button{
  font-family: inherit;
}

.top button,
.card button{
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.07);
  color: var(--text);
  padding:10px 14px;
  font-weight:750;
  cursor:pointer;
}

.top button:hover,
.card button:hover{background: rgba(255,255,255,.10)}

button.ghost{
  background: transparent;
}
button.ghost:hover{background: rgba(255,255,255,.06)}

/* inputs inside cards (e.g., Notes search) */
.card input{
  border-radius:12px;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.25);
  color: var(--text);
}
.card input::placeholder{color: rgba(229,231,235,.55)}

/* links */
.links{display:grid; grid-template-columns: repeat(4, 1fr); gap:10px}
.link{
  display:flex; gap:10px; align-items:center;
  padding:12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  text-decoration:none;
  color: var(--text);
}
.link:hover{border-color: rgba(168,85,247,.35)}
.icon{
  width:34px; height:34px;
  display:grid; place-items:center;
  border-radius:12px;
  background: linear-gradient(135deg, rgba(255,45,85,.18), rgba(168,85,247,.16));
  border:1px solid rgba(255,255,255,.12);
  font-weight:900;
}

/* modal */
.modal{position:fixed; inset:0; display:none; place-items:center; padding:18px; background: rgba(0,0,0,.65); backdrop-filter: blur(6px); z-index:50}
.modal.show{display:grid}
.modal-card{
  width:min(520px, 100%);
  border-radius:20px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(12,12,18,.92);
  box-shadow: 0 20px 70px rgba(0,0,0,.55);
  padding:16px;
}
.modal-head{margin-bottom:12px}
.modal-title{font-size:18px; font-weight:900}
.modal-sub{font-size:12px; color:var(--muted2); margin-top:4px}
.modal-form{display:flex; flex-direction:column; gap:10px}
.modal-form label{display:flex; flex-direction:column; gap:6px; font-size:12px; color:var(--muted)}
.modal-form input,
.modal-form textarea,
.modal-form select{
  border-radius:12px;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.35);
  color: var(--text);
}

.modal-form textarea{line-height:1.35}
.modal-actions{display:flex; gap:10px; margin-top:6px}
.modal-actions button{flex:1; border-radius:12px; padding:10px 12px; border:1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.07); color: var(--text); font-weight:850; cursor:pointer}
.modal-actions button:hover{background: rgba(255,255,255,.10)}
.modal-actions .ghost{background: transparent}
.modal-actions .ghost:hover{background: rgba(255,255,255,.06)}
.modal-error{min-height:18px; font-size:12px; color: rgba(251,113,133,.95)}

/* settings modal */
.settings-shell{
  display:grid;
  grid-template-columns:220px 1fr;
  gap:16px;
  min-height:520px;
}

.settings-sidebar{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding-right:10px;
  border-right:1px solid rgba(255,255,255,.08);
}

.settings-tab{
  width:100%;
  text-align:left;
  border-radius:14px;
  padding:12px 14px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  color:var(--text);
  font-weight:700;
  cursor:pointer;
  transition:all .18s ease;
}

.settings-tab:hover{
  background:rgba(255,255,255,.07);
  border-color:rgba(168,85,247,.22);
}

.settings-tab.active{
  background:linear-gradient(135deg, rgba(255,45,85,.14), rgba(168,85,247,.18));
  border-color:rgba(168,85,247,.38);
  box-shadow:0 10px 28px rgba(168,85,247,.12);
}

.settings-content{
  display:flex;
  flex-direction:column;
  min-width:0;
}

.settings-panel{
  display:none;
  animation:settingsFade .18s ease;
}

.settings-panel.active{
  display:block;
}

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

@media (max-width: 900px){
 .top{
   flex-wrap:wrap;
   align-items:flex-start;
   gap:12px;
   padding:14px;
 }

 .brand{
   width:100%;
   min-width:auto;
   flex-wrap:wrap;
   justify-content:space-between;
   gap:10px;
 }

 .ticker{
   order:3;
   width:100%;
   flex-direction:column;
   align-items:flex-start;
   gap:8px;
 }

 .ticker-window{
   width:100%;
 }

 .grid{
   width:min(100%, calc(100% - 20px));
   margin:14px auto 24px;
   gap:12px;
 }

 .card{
   grid-column: span 12;
   padding:12px;
 }

 .links{
   grid-template-columns: repeat(2, 1fr);
 }

 .weather{
   flex-direction:column;
   align-items:flex-start;
 }

 .chat{
   height:220px;
 }

 .modal{
   padding:10px;
   align-items:flex-start;
   overflow:auto;
 }

 .modal-card{
   width:100%;
   max-height:none;
   border-radius:18px;
   padding:14px;
   margin:auto 0;
 }

 #settingsModal .modal-card{
   width:100%;
 }

  .settings-shell{
    grid-template-columns:1fr;
    min-height:auto;
  }

  .settings-sidebar{
    flex-direction:row;
    overflow:auto;
    padding-right:0;
    padding-bottom:10px;
    border-right:none;
    border-bottom:1px solid rgba(255,255,255,.08);
  }

  .settings-tab{
    min-width:160px;
  }

 #settingsModal form{
   grid-template-columns:1fr !important;
 }

 .modal-actions{
   flex-direction:column;
 }

 .modal-actions button{
   width:100%;
 }
}
@media (max-width: 560px){
 .top{
   padding:12px;
 }

 .title{
   font-size:15px;
 }

 .status{
   width:100%;
   font-size:11px;
 }

 .top button{
   width:100%;
 }

 .brand{
   gap:8px;
 }

 .ticker-label{
   font-size:11px;
 }

 .ticker-window{
   padding:10px;
   border-radius:12px;
 }

 .ticker-item{
   font-size:12px;
   margin-right:18px;
 }

 .card-head{
   flex-direction:column;
   align-items:flex-start;
   gap:6px;
 }

 .big{
   font-size:34px;
 }

 .links{
   grid-template-columns:1fr;
 }

 .chatbar{
   flex-direction:column;
 }

 .chatbar button,
 .chatbar input{
   width:100%;
 }

 .modal-card{
   border-radius:16px;
 }

  .settings-sidebar{
    flex-direction:column;
    border-bottom:none;
    padding-bottom:0;
  }

  .settings-tab{
    width:100%;
    min-width:0;
  }
}

@media (prefers-reduced-motion: reduce){
  .ticker-track{animation:none}
}
/* ================================
   Voice Notes – Modal Polish
================================ */

/* Prevent .row inside modals from looking like dashboard cards */
.modal .row{
  padding: 0;
  border: none;
  background: transparent;
}

/* Voice main modal state row */
#voiceModal .row{
  justify-content: space-between;
  gap: 12px;
}

#voiceRecordedState{
  font-size: 12px;
  color: var(--muted2);
}

/* Recording fullscreen modal tweaks */
.modal-card.fullscreen{
  width: min(680px, 100%);
}

@media (max-width: 720px){
  .modal-card.fullscreen{
    width: 100vw;
    height: 100vh;
    border-radius: 0;
  }
}

/* Recorder buttons alignment */
#voiceRecordModal .row{
  display:flex;
  align-items:center;
  gap:12px;
}

#voiceRecordModal button{
  min-width:110px;
}

/* Primary action emphasis */
.modal-actions button.primary,
#validateVoiceRecord{
  background: rgba(168,85,247,.22);
  border: 1px solid rgba(168,85,247,.45);
}

.modal-actions button.primary:hover,
#validateVoiceRecord:hover{
  background: rgba(168,85,247,.32);
}

/* Audio preview styling */
#voicePreview{
  margin-top:10px;
  width:100%;
  border-radius:12px;
  background: rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.08);
}