/* =========================================================
   Depok Dashboard — "Soft Premium" (dark), with every fix
   applied since: per-section accents restored, 60px icons,
   icon-on-top/label-below order, status dot aligned with the
   title row, LAN marker top-left, wider grid, roomier text.
   Structure/classes unchanged — still only what index.js /
   data.js require:
   .dashboard-widget .services/.webs/.devices
   .widget-content / .widget-content-holder
   .link-item / .link-item-bar / .online-marker / .lan-marker
   ========================================================= */

:root{
  --base: #14110F;
  --base-2: #1C1613;
  --ink: #F4EEE4;
  --ink-muted: #9C9187;
  --ink-faint: #6C6259;

  --glass: rgba(247, 240, 230, 0.045);
  --glass-strong: rgba(247, 240, 230, 0.08);
  --hairline: rgba(247, 240, 230, 0.12);
  --hairline-soft: rgba(247, 240, 230, 0.08);

  --accent-services: #6C8EFF;
  --accent-webs: #B18CFF;
  --accent-devices: #45D6C4;
  --status-online: #7FA88C;
  --status-offline: #B96B54;

  --radius-xl: 22px;
  --radius-lg: 16px;
  --radius-md: 12px;

  --font-serif: 'Iowan Old Style', 'Palatino Linotype', Georgia, 'Times New Roman', serif;
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

*{
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  box-sizing: border-box;
}

*::-webkit-scrollbar{ display: none; }

html{ width: 100%; }

html,body{
  min-height: 100%;
  width: 100%;
  margin: 0;
  font-family: var(--font-sans);
  color: var(--ink);
}

body{
  background-color: var(--base);
  background-image:
    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(201, 168, 118, 0.10), transparent 60%),
    radial-gradient(ellipse 50% 50% at 100% 100%, rgba(247, 240, 230, 0.05), transparent 55%),
    linear-gradient(160deg, var(--base) 0%, var(--base-2) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  background-repeat: no-repeat, no-repeat, no-repeat, repeat;
  background-size: cover, cover, cover, 140px 140px;
  background-attachment: fixed;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);
}

/* ---------- Masthead ---------- */

.masthead{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 30px 48px;
  max-width: 1180px;
  margin: 0 auto;
}

.masthead-title{ display: flex; align-items: baseline; gap: 14px; }

.mark{
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 28px;
  color: var(--ink);
}

.sub{
  font-family: var(--font-sans);
  font-size: 13px;
  letter-spacing: 0.3px;
  color: var(--ink-muted);
}

#emojis{ display: flex; gap: 14px; align-items: center; }

.emoji{
  width: 22px;
  height: 22px;
  opacity: 0.85;
  transition: opacity .3s ease;
}

.emoji:hover{ opacity: 1; }

/* ---------- The one canvas ---------- */

.page{
  max-width: 1180px;
  margin: 10px auto 80px;
  padding: 44px 48px 52px;
  background: var(--glass);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-xl);
  backdrop-filter: blur(28px) saturate(1.1);
  -webkit-backdrop-filter: blur(28px) saturate(1.1);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.block-title{
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 20px;
  color: var(--ink);
  margin: 0 0 22px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--hairline-soft);
}

.block-title img{
  width: 24px;
  height: 24px;
  padding: 6px;
  border-radius: 9px;
  object-fit: contain;
}

.services .block-title{ border-bottom-color: rgba(108, 142, 255, 0.35); }
.webs .block-title{ border-bottom-color: rgba(177, 140, 255, 0.35); }
.devices .block-title{ border-bottom-color: rgba(69, 214, 196, 0.35); }

.services .block-title span{ color: var(--accent-services); }
.webs .block-title span{ color: var(--accent-webs); }
.devices .block-title span{ color: var(--accent-devices); }

.services .block-title img{ background: rgba(108, 142, 255, 0.16); }
.webs .block-title img{ background: rgba(177, 140, 255, 0.16); }
.devices .block-title img{ background: rgba(69, 214, 196, 0.16); }

.divider{
  border: none;
  border-top: 1px solid var(--hairline-soft);
  margin: 44px 0;
}

.split{ display: flex; gap: 52px; }
.split .half{ flex: 1 1 0; min-width: 0; }

/* ---------- Services / Devices grids ---------- */

.dashboard-widget.services .widget-content-holder{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 18px;
}

.dashboard-widget.devices .widget-content-holder{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 16px;
}

/* ---------- Websites list ---------- */

.dashboard-widget.webs .widget-content{
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ---------- Tiles (services / devices) ---------- */

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

.link-item {
  position: relative;
  border: 1px solid var(--hairline-soft);
  border-radius: var(--radius-lg);
  background: var(--glass);
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 1 / 1.05;
  transition: border-color .25s ease, background .25s ease, box-shadow .25s ease, transform .25s ease;
  animation: fadeInSoft .5s ease both;
}

.link-item.disabled{
  animation: none;
  opacity: 0.4;
}

.disable{
  position: absolute;
  inset: 0;
  background: rgba(20, 17, 15, 0.6);
}

.link-item:not(.disabled):hover{
  background: var(--glass-strong);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.4);
  transform: translateY(-3px);
}

.services .link-item:not(.disabled):hover{ border-color: var(--accent-services); }
.devices .link-item:not(.disabled):hover{ border-color: var(--accent-devices); }

.link-item a, .link-item-bar a{
  color: var(--ink);
  text-decoration: none;
}

.link-item a{
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}

.link-item .link-image{
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  order: 1;
}

.link-item .link-image img{
  width: 60px;
  height: 60px;
  padding: 12px;
  border-radius: 50%;
  object-fit: contain;
  transition: transform .3s ease;
}

.services .link-item .link-image img{ background: rgba(108, 142, 255, 0.14); }
.devices .link-item .link-image img{ background: rgba(69, 214, 196, 0.14); }

.link-item:not(.disabled):hover .link-image img{
  transform: scale(1.06);
}

.link-item .link-text{
  flex: 0 0 auto;
  order: 2;
  padding: 6px 14px 16px;
  text-align: center;
  font-size: 13.5px;
  line-height: 1.35;
  font-weight: 500;
  color: var(--ink-muted);
  transition: color .3s ease;
}

.link-item:not(.disabled):hover .link-text{ color: var(--ink); }

/* ---------- Bars (websites) ---------- */

.link-item-bar {
  position: relative;
  border: 1px solid var(--hairline-soft);
  border-radius: var(--radius-md);
  background: var(--glass);
  overflow: hidden;
  cursor: pointer;
  transition: border-color .25s ease, background .25s ease, box-shadow .25s ease;
  animation: fadeInSoft .5s ease both;
}

.link-item-bar:hover{
  border-color: var(--accent-webs);
  background: var(--glass-strong);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}

.link-item-bar a{
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px 22px;
  height: 100%;
}

.link-item-bar .link-image{
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(177, 140, 255, 0.16);
}

.link-item-bar .link-image img{
  width: 20px;
  height: 20px;
  object-fit: contain;
  transition: transform .3s ease;
}

.link-item-bar:hover .link-image img{
  transform: scale(1.06);
}

.link-item-bar .link-text{
  flex: 1 1 auto;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-muted);
  transition: color .3s ease;
}

.link-item-bar:hover .link-text{ color: var(--ink); }

/* ---------- Status markers ---------- */

.online-marker{
  position: absolute;
  right: 14px;
  bottom: 17px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--status-online);
  box-shadow: 0 0 8px 2px rgba(127, 168, 140, 0.5);
}

.online-marker.offline{
  background: var(--status-offline);
  box-shadow: 0 0 8px 2px rgba(185, 107, 84, 0.4);
}

.lan-marker{
  position: absolute;
  left: 10px;
  top: 10px;
  width: 15px;
  height: 15px;
  opacity: 0.85;
}

.lan-marker > img{ width: 100%; }

.link-item-bar .lan-marker{
  left: auto;
  right: 10px;
  bottom: auto;
  top: 50%;
  transform: translateY(-50%);
}

/* ---------- Monitor mode (?device=monitor, big screens) ---------- */

@media (min-width: 1960px){
  html.monitor .dashboard-widget.services .widget-content-holder{
    grid-template-columns: repeat(6, 1fr);
  }
  html.monitor .link-item{ aspect-ratio: 1 / 0.7; }
}

/* ---------- Responsive ---------- */

@media (max-width: 900px){
  .masthead{ padding: 24px 28px; }
  .page{ margin: 6px 16px 48px; padding: 32px 26px 38px; }
  .split{ flex-direction: column; gap: 38px; }
}

@media (max-width: 560px){
  .masthead{ padding: 18px 20px; }
  .mark{ font-size: 22px; }
  .sub{ display: none; }
  .page{ padding: 24px 16px 32px; border-radius: 18px; }
  .block-title{ font-size: 18px; margin-bottom: 16px; }
  .divider{ margin: 32px 0; }
  .split{ gap: 30px; }
  .dashboard-widget.services .widget-content-holder{
    grid-template-columns: repeat(auto-fill, minmax(102px, 0.5fr));
    gap: 12px;
  }
  .dashboard-widget.devices .widget-content-holder{
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 10px;
  }
  .link-item .link-text{ font-size: 12px; padding: 4px 10px 12px; }
  .link-item-bar .link-text{ font-size: 13.5px; }
}