.counter-hero .hero-inner{max-width:940px}
.counter-tool-section{padding:28px 0 40px}
.counter-shell{
  width:min(100%,1060px);margin:0 auto;padding:clamp(16px,3vw,28px);
  border:1px solid var(--line);border-radius:var(--radius);background:#fff;
  box-shadow:var(--shadow-md)
}
.counter-heading{
  display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:16px
}
.counter-heading h2{margin:0}
.privacy-badge{
  flex:0 0 auto;padding:6px 10px;border-radius:999px;background:#f1fbf4;
  border:1px solid #cde9d4;color:#26713b;font-size:.76rem;font-weight:800
}

.mode-scroller{overflow-x:auto;scrollbar-width:none;margin:0 -2px 14px;padding:2px}
.mode-scroller::-webkit-scrollbar{display:none}
.mode-tabs{display:flex;gap:7px;min-width:max-content}
.mode-tab{
  min-height:40px;padding:8px 11px;border:1px solid var(--line);border-radius:999px;
  background:#fff;color:var(--text);font-size:.79rem;font-weight:800
}
.mode-tab span{margin-left:4px;color:var(--muted);font-size:.7rem}
.mode-tab:hover,.mode-tab.is-active{
  background:var(--brand-soft);border-color:#d5b7d9;color:var(--brand-dark)
}
.mode-tab.is-active{box-shadow:inset 0 0 0 1px #d6b6da}
.mode-tab.is-active span{color:#805c84}

.custom-limit-row{
  display:flex;align-items:center;gap:10px;margin:0 0 12px;padding:10px 12px;
  border:1px solid var(--line);border-radius:11px;background:var(--surface-soft)
}
.custom-limit-row label{font-size:.8rem;font-weight:800}
.custom-limit-row input{
  width:120px;min-height:38px;border:1px solid var(--line);border-radius:9px;
  padding:6px 9px;font:inherit
}

.editor-wrap{
  overflow:hidden;border:1.5px solid #d9c9dc;border-radius:15px;background:#fff;
  transition:border-color .18s ease,box-shadow .18s ease
}
.editor-wrap:focus-within{border-color:var(--brand);box-shadow:0 0 0 4px rgba(198,42,216,.09)}
#counter-input{
  display:block;width:100%;min-height:230px;resize:vertical;border:0;outline:0;
  padding:16px;background:#fff;color:var(--text);font:500 .96rem/1.6 inherit
}
.editor-footer{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:9px 10px;border-top:1px solid var(--line);background:var(--surface-soft)
}
.editor-actions{display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.editor-actions button{
  min-height:33px;padding:6px 9px;border:1px solid var(--line);border-radius:8px;
  background:#fff;color:var(--text);font-size:.73rem;font-weight:800
}
.editor-actions button:hover{background:var(--brand-soft);border-color:#d6bada;color:var(--brand-dark)}
#autosave-note{flex:0 0 auto;color:var(--muted);font-size:.7rem;font-weight:700}

.limit-dashboard{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:12px;margin-top:13px}
.limit-card{
  padding:17px;border:1px solid #dfc9e2;border-radius:15px;
  background:linear-gradient(135deg,#fff 20%,#fcf8fd)
}
.limit-main{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.limit-label{display:block;color:var(--muted);font-size:.75rem;font-weight:800}
.limit-number{display:flex;align-items:baseline;gap:5px;margin-top:2px}
.limit-number strong{font-size:2.15rem;line-height:1;color:var(--text)}
.limit-number span{color:var(--muted);font-size:.9rem;font-weight:750}
.status-pill{
  padding:5px 9px;border-radius:999px;font-size:.72rem;font-weight:850;
  background:#eaf7ee;color:#28713d
}
.status-pill.is-warning{background:#fff4dd;color:#9b6300}
.status-pill.is-over{background:#fff0ef;color:#b42318}
.progress-track{
  height:9px;overflow:hidden;margin-top:15px;border-radius:999px;background:#eee8ef
}
.progress-fill{
  display:block;width:0;height:100%;border-radius:inherit;background:var(--brand);
  transition:width .12s ease
}
.progress-fill.is-warning{background:#d28a12}
.progress-fill.is-over{background:#d13b33}
.limit-bottom{
  display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-top:11px
}
.limit-bottom strong{font-size:.79rem}
.limit-bottom span{max-width:54%;color:var(--muted);font-size:.69rem;line-height:1.4;text-align:right}

.quick-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.stat-card{
  min-width:0;display:grid;place-items:center;align-content:center;min-height:83px;
  padding:9px;border:1px solid var(--line);border-radius:12px;background:#fff;text-align:center
}
.stat-card strong{max-width:100%;font-size:1.08rem;overflow:hidden;text-overflow:ellipsis}
.stat-card span{margin-top:4px;color:var(--muted);font-size:.66rem;font-weight:750}

.smart-alerts{display:grid;gap:7px;margin-top:12px}
.smart-alert{
  display:flex;align-items:flex-start;gap:9px;padding:9px 11px;border-radius:10px;
  border:1px solid var(--line);background:var(--surface-soft);font-size:.76rem;line-height:1.45
}
.smart-alert strong{display:block}
.smart-alert.is-good{background:#f4fbf6;border-color:#d5ead9;color:#2d6f40}
.smart-alert.is-warning{background:#fff9ed;border-color:#eddcb6;color:#825700}
.smart-alert.is-danger{background:#fff3f2;border-color:#efcfcc;color:#9c2e29}

.feed-preview-section{padding:36px 0;background:var(--surface-soft)}
.preview-layout{
  width:min(100%,960px);margin:0 auto;display:grid;grid-template-columns:minmax(0,.8fr) minmax(360px,1fr);
  align-items:center;gap:36px
}
.preview-intro{color:var(--muted)}
.feed-card{
  overflow:hidden;border:1px solid var(--line);border-radius:17px;background:#fff;
  box-shadow:var(--shadow-sm)
}
.feed-user{display:flex;align-items:center;gap:9px;padding:12px 13px}
.feed-avatar{
  width:34px;height:34px;display:grid;place-items:center;border-radius:50%;
  background:linear-gradient(135deg,#ff8a00,#e1306c,#833ab4);color:#fff;font-size:.67rem;font-weight:900
}
.feed-user div{display:grid}
.feed-user strong{font-size:.78rem}
.feed-user span{color:var(--muted);font-size:.65rem}
.feed-placeholder{
  height:190px;display:grid;place-items:center;background:linear-gradient(135deg,#f1e9f3,#f9f5fa)
}
.feed-placeholder span{color:#9b899f;font-size:.76rem;font-weight:900;letter-spacing:.08em}
.feed-caption{padding:12px 13px 6px;font-size:.8rem;line-height:1.5}
.feed-caption strong{margin-right:5px}
.feed-caption button{
  border:0;background:transparent;color:var(--muted);padding:0 0 0 3px;font:inherit;cursor:pointer
}
.hidden-count{margin:0;padding:0 13px 12px;color:var(--muted);font-size:.68rem}

.limit-grid-section{padding:42px 0}
.limits-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:18px
}
.limit-reference{
  padding:16px;border:1px solid var(--line);border-radius:13px;background:#fff
}
.limit-reference.is-primary{border-color:#ddc0e1;background:linear-gradient(180deg,#fff,#fdf9fe)}
.limit-reference span{display:block;color:var(--muted);font-size:.72rem;font-weight:800}
.limit-reference strong{display:block;margin:2px 0 7px;font-size:1.55rem}
.limit-reference p{margin:0;color:var(--muted);font-size:.75rem;line-height:1.5}
.reference-note{margin:13px 0 0;color:var(--muted);font-size:.72rem;line-height:1.5}

.technical-section{padding:0 0 42px}
.technical-details{
  border:1px solid var(--line);border-radius:14px;background:#fff;overflow:hidden
}
.technical-details summary{
  display:flex;align-items:center;justify-content:space-between;gap:16px;cursor:pointer;padding:15px 17px
}
.technical-details summary span:first-child{display:grid;gap:2px}
.technical-details summary strong{font-size:.88rem}
.technical-details summary small{color:var(--muted);font-size:.69rem;font-weight:600}
.technical-details summary>span:last-child{font-size:1.15rem;color:var(--brand-dark)}
.technical-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:0 17px 13px
}
.technical-grid div{
  display:grid;gap:3px;padding:11px;border:1px solid var(--line);border-radius:10px;background:var(--surface-soft)
}
.technical-grid strong{font-size:1.05rem}
.technical-grid span{color:var(--muted);font-size:.68rem}
.technical-details>p{margin:0;padding:0 17px 16px;color:var(--muted);font-size:.72rem;line-height:1.5}

.related-tool-card{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  margin-top:34px;padding:20px;border:1px solid #e1c9e5;border-radius:16px;background:var(--brand-soft)
}
.related-tool-card h3{margin:0 0 6px}
.related-tool-card p{margin:0}
.related-links{display:flex;flex-wrap:wrap;gap:8px;flex:0 0 auto}
.primary-button,.secondary-button{
  min-height:40px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:10px;padding:8px 12px;font-weight:800;text-decoration:none
}
.primary-button{border:1px solid var(--brand);background:var(--brand);color:#fff}
.secondary-button{border:1px solid var(--line);background:#fff;color:var(--text)}

.counter-toast{
  position:fixed;left:50%;bottom:24px;z-index:2200;transform:translate(-50%,18px);
  padding:9px 14px;border-radius:999px;background:#211925;color:#fff;
  font-size:.84rem;font-weight:800;opacity:0;visibility:hidden;transition:.18s ease;
  box-shadow:var(--shadow-md)
}
.counter-toast.is-visible{opacity:1;visibility:visible;transform:translate(-50%,0)}

@media (max-width:900px){
  .limit-dashboard{grid-template-columns:1fr}
  .preview-layout{grid-template-columns:1fr;gap:18px}
  .limits-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:700px){
  .counter-heading{gap:10px}
  .privacy-badge{font-size:.66rem}
  #counter-input{min-height:190px}
  .editor-footer{align-items:flex-start;flex-direction:column}
  #autosave-note{align-self:flex-end}
  .limit-bottom{flex-direction:column}
  .limit-bottom span{max-width:none;text-align:left}
  .quick-stats{grid-template-columns:repeat(4,minmax(0,1fr))}
  .related-tool-card{align-items:flex-start;flex-direction:column}
  .related-links{width:100%}
}
@media (max-width:520px){
  .counter-tool-section{padding-top:18px}
  .counter-shell{padding:14px;border-radius:14px}
  .counter-heading h2{font-size:1.15rem}
  .editor-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%}
  .editor-actions button{padding:6px 4px}
  .quick-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat-card{min-height:70px}
  .limits-grid{grid-template-columns:1fr}
  .technical-grid{grid-template-columns:1fr}
  .preview-layout{display:block}
  .feed-card{margin-top:18px}
  .related-links{display:grid;grid-template-columns:1fr 1fr}
}
@media (prefers-reduced-motion:reduce){
  .progress-fill,.counter-toast,.editor-wrap{transition:none}
}