:root{
  --bg1: #d7e2fa;
  --bg2: #d7e2fa;

  --text-color:#111; --button-bg:#fff; --button-border:#ddd; --button-hover:#f0f0f0;
}

html.boot #category-listing, html.boot #secondary-category-listing,
html.boot #toolContainer, html.boot #categories-header, html.boot #categoryBox { display:none!important; }

*{ box-sizing:border-box; }
html,body{ max-width:100%; overflow-x:hidden; }

body{
  margin:0;
  font-family:'Poppins',sans-serif;
  background: linear-gradient(to bottom right, var(--bg1), var(--bg2));
  color:var(--text-color);
  display:flex; flex-direction:column; min-height:100vh; align-items:center; justify-content:space-between;
}

.slogan {
  font-size: 1.4rem;
  margin-bottom: 10px;
  height: 2em;
  position: relative;
  white-space: nowrap;
  overflow: hidden;
  visibility: hidden;
}

#scrollTopBtn {
  position: fixed; bottom: 20px; right: 20px; z-index: 999; display: none;
  background-color: #ffffff; border: 1px solid #aaa; border-radius: 50px; padding: 10px 16px;
  font-size: 1rem; cursor: pointer; box-shadow: 0 4px 10px rgba(0,0,0,0.15); transition: opacity .3s, visibility .3s;
}
#scrollTopBtn:hover { background-color: #f0f0f0; }

.main-container{ display:flex; flex-direction:column; align-items:center; padding:30px 20px; max-width:550px; width:100%; margin:auto; }
.logo{ width:120px; height:120px; object-fit:cover; margin-bottom:-8px; }

.ws-title-wrap{ text-align:center; margin:0 0 6px; }
.ws-line-1,.ws-line-2{ font-weight:700; line-height:1.2; margin-top:5px; font-size:30.5px; }
.ws-line-2{ margin-top:2px; }

body.editing .ws-line-2{ margin-top:10px; }

@keyframes fieldPopIn {
  0% { transform: translateY(-2px) scale(.98); opacity: 0; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

.editable{ padding:2px 6px; border-radius:8px; transition:background .2s, outline-color .2s, box-shadow .2s; }
.editable[contenteditable="true"]{
  outline:2px solid #d7e2fa; background:#fff; animation: fieldPopIn .18s ease-out both;
}

.env-wrap{ position: relative; display: inline-block; }
.env-pill{
  display:inline-flex; align-items:center; gap:6px;
  line-height:1; user-select:none; cursor: default;
  transition: background .2s, box-shadow .2s, color .2s, padding .2s, border .2s, outline .2s, border-radius .2s, transform .2s, opacity .2s;
}
.env-pill:not(.editable){
  background: transparent; border: 0; padding: 0; box-shadow: none; border-radius: 0;
}
.env-pill .caret{ font-size:.8em; opacity:.7; transition: transform .15s ease; }
.env-pill:not(.editable) .caret{ display:none; }

.env-pill.editable{
  background:#fff; border:1px solid #ddd; border-radius:8px; padding:4px 8px;
  outline:2px solid #d7e2fa; cursor: pointer; animation: fieldPopIn .18s ease-out both;
}
.env-pill.editable:hover{ background:#fafafa; box-shadow:0 2px 6px rgba(0,0,0,.08); }
.env-pill.open .caret{ transform: rotate(180deg); }

.env-menu{
  position:absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  width: max-content; min-width: 200px;
  background:#fff; border:3px solid #d7e2fa; border-radius:16px;
  box-shadow:0 8px 24px rgba(0,0,0,.12);
  max-height:260px; overflow:auto; display:none; z-index:1000; color:#000;
}
.env-menu.open{ display:block; }

.env-menu .row{
  position: relative;
  padding:12px 16px;
  border-bottom:1px solid #eee;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-size:1.12rem;
  line-height:1.28;
  min-height: 38px;
  text-align:center;
}
.env-menu .row:last-child{ border-bottom:none; }
.env-menu .row:hover{ background:#d7e2fa; }
.env-menu .check{
  position:absolute; right:10px; top:50%; transform: translateY(-50%);
  color:#333; opacity:.8; display:none;
}
.env-menu .row.active .check{ display:inline-block; }

.ws-actions{ display:flex; gap:8px; justify-content:center; align-items:center; margin:8px 0 10px; }
.icon-btn{ background:transparent; border:0; cursor:pointer; line-height:1; color:#333; padding:6px 10px; border-radius:10px; }
.icon-btn:hover{ color:#000; background:rgba(0,0,0,.06); }
.icon-btn i{ font-size:1.05em; }
.icon-btn .label{ margin-left:6px; font-weight:500; }

.theme-wrap{
  width:75%;
  max-width:800px;
  display:none;
  margin:6px auto;
}
.preset-bar{
  position:relative; height:24px; border-radius:14px; padding:0 16px;
  background: linear-gradient(90deg, #d7e2fa, #d7e2fa);
  box-shadow:0 2px 10px rgba(0,0,0,.15) inset, 0 2px 10px rgba(0,0,0,.08);
  cursor: pointer;
}
.preset-bar .thumb{
  position:absolute; top:50%; transform:translate(-50%,-50%);
  width:22px; height:22px; border-radius:50%;
  background:#fff; box-shadow:0 2px 8px rgba(0,0,0,.35);
  pointer-events:none;
}
.theme-caption{ text-align:center; font-size:.9rem; color:#333; margin:6px 0 0; }

.tool-container{ display:flex; flex-direction:column; gap:0; width:100%; max-width:800px; margin:0 auto 85px; }
.ws-row{ margin-bottom:0px; }
.tool-card{ background:#fff; border:1px solid #ddd; border-radius:12px; padding:10px; margin:10px 0; box-shadow:0 2px 10px rgba(0,0,0,0.08); }

.ws-empty{
  display:grid; place-items:center; min-height:160px; text-align:center;
  border:3px dashed #d7e2fa; border-radius:20px; background:#fff; padding:12px;
}
.ws-limit{ color:#a33; margin-top:8px; }
.pagination-button{
  padding:10px 20px; margin:6px 6px; font-size:.95rem; border:1px solid var(--button-border);
  background-color:var(--button-bg); color:var(--text-color); border-radius:30px; cursor:pointer;
  box-shadow:0 2px 6px rgba(0,0,0,.1); transition:background .3s, box-shadow .3s;
}
.pagination-button:hover{ background-color:var(--button-hover); }

.ws-remove{
  position:absolute; top:8px; right:8px; border:none; background:transparent; color:#e53935;
  font-weight:800; padding:6px 10px; cursor:pointer; line-height:1; border-radius:10px; font-size:20px;
}
.ws-remove:hover{ color:#b71c1c; background:rgba(229,57,53,.06); }

.search-container{ width:100%; max-width:400px; margin:10px auto 5px; position:relative; margin-bottom:25px; }
.search-container input{
  width:100%; padding:15px 15px; border:1px solid #d7e2fa; border-radius:30px; font-size:1em; background:#fff;
  box-shadow:0 4px 10px rgba(0,0,0,.2); outline:none;
}
.search-results{
  position:absolute; top:50px; width:100%; background:#fff; border:1px solid #d7e2fa; border-radius:20px;
  max-height:200px; overflow-y:auto; display:none; z-index:1000; color:#000; font-size:1em;
}
.search-results div{ padding:7px; border-bottom:1px solid #eee; cursor:pointer; }
.search-results div:hover{ background-color:#d7e2fa; }

.ws-toast{ position:fixed; right:16px; bottom:16px; background:#111; color:#fff; padding:10px 14px; border-radius:12px; opacity:0; pointer-events:none; transition:.25s; z-index:4000;}
.ws-toast.show{ opacity:1; }
footer{ padding:20px; text-align:center; font-size:.9rem; color:#777; }
footer a{ color:#555; text-decoration:none; margin:0 10px; } footer a:hover{ text-decoration:underline; }

.ad-card{ background:#fff; border:1px solid #ddd; border-radius:12px; padding:0; margin:10px 0; box-shadow:0 2px 10px rgba(0,0,0,.08); overflow:hidden; }
.ad-card .ad-label{ text-align:center; font-size:12px; color:#666; padding:8px 0 0; }