:root{
  --bg:#0b0c10; --card:#111218; --text:#e8eaee; --muted:#a7afbf; --line:#1c2030;
  --brand:#FF5C39; --accent:#FFD166; --ring:rgba(124,138,255,.35);
  --shadow:0 10px 30px rgba(0,0,0,.22);
}
@media (prefers-color-scheme: light){
  :root{ --bg:#f7f8fb; --card:#ffffff; --text:#111418; --muted:#5b6374; --line:#e6e8ef; --shadow:0 8px 22px rgba(0,0,0,.06); }
}
[data-theme='light']{ --bg:#f7f8fb; --card:#ffffff; --text:#111418; --muted:#5b6374; --line:#e6e8ef; --shadow:0 8px 22px rgba(0,0,0,.06); }
[data-theme='dark']{ --bg:#0b0c10; --card:#111218; --text:#e8eaee; --muted:#a7afbf; --line:#1c2030; --shadow:0 10px 30px rgba(0,0,0,.22); }

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue','Noto Sans',sans-serif}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{max-width:1160px;margin:0 auto;padding:20px}

.header{position:sticky;top:0;background:color-mix(in srgb, var(--bg) 85%, transparent);backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid var(--line);z-index:9}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.2px;white-space:nowrap}
.brand .dot{width:12px;height:12px;border-radius:12px;background:linear-gradient(135deg,var(--brand),var(--accent));box-shadow:0 0 18px var(--accent) inset, 0 0 18px color-mix(in oklch, var(--accent) 60%, transparent)}
nav a{opacity:.9;}

.theme-toggle{border:1px solid var(--line);border-radius:12px;padding:6px 10px;cursor:pointer;background:var(--card);box-shadow:var(--shadow);display:flex;align-items:center;gap:8px}
.theme-toggle svg{width:18px;height:18px}
#bulbFill{display:none}
[data-theme='light'] #bulbFill{display:inline}
[data-theme='light'] #bulbOutline{display:none}
[data-theme='dark'] #bulbFill{display:none}
[data-theme='dark'] #bulbOutline{display:inline}

.hero{display:grid;grid-template-columns:1.2fr .8fr;gap:18px;align-items:center;margin:18px 0}
@media (max-width:900px){ .hero{grid-template-columns:1fr} }
.hero h1{font-size:clamp(1.8rem,3.4vw,2.4rem);margin:.2rem 0 .6rem 0}
.hero p{margin:0;color:var(--muted)}

.search{display:flex;gap:8px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 14px;box-shadow:var(--shadow)}
.search input{background:transparent;border:none;outline:none;color:var(--text);flex:1 1 auto;min-width:0;font-size:1rem}
.kbd{border-radius:8px; padding:2px 6px;color:white;background:#565559}

.icon{width:18px;height:18px;opacity:.9}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);background:var(--card);border-radius:12px;padding:8px;cursor:pointer}
.icon-btn:active{transform:translateY(1px)}
[data-theme='dark'] .icon-btn .icon{color:#fff;opacity:1}
[data-theme='dark'] .theme-toggle svg{color:#fff}

.main{min-height:60vh}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px;margin-top:12px}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:18px;box-shadow:var(--shadow);transition:transform .12s ease, border .18s ease}
.card:hover{transform:translateY(-3px);border-color:color-mix(in srgb, var(--brand) 30%, var(--line))}
.card h3{display:flex;align-items:center;gap:10px;margin:.2rem 0 .25rem 0;font-size:1.05rem}
.card p{margin:.2rem 0;color:var(--muted);font-size:.95rem}
.badge{display:inline-block;margin-top:6px;background:color-mix(in srgb, var(--brand) 12%, var(--card));border:1px solid var(--line);padding:4px 8px;border-radius:999px;color:var(--muted);font-size:.8rem}
.section-title{display:flex;align-items:center;justify-content:space-between;margin-top:8px}

.tool{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:18px;box-shadow:var(--shadow)}
.label{display:block;color:var(--muted);margin:8px 0 6px}
input[type=\"text\"], input[type=\"number\"], textarea, select{width:100%;background:#0f1117;border:1px solid #2b2f3e;border-radius:12px;color:#dce1ea;padding:10px 12px;outline:none}
[data-theme='light'] input[type=\"text\"], [data-theme='light'] input[type=\"number\"], [data-theme='light'] textarea, [data-theme='light'] select{background:#fff;color:#111418;border:1px solid #dfe3ec}
input:focus, textarea:focus, select:focus{box-shadow:0 0 0 4px var(--ring);border-color:transparent}

.inline{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(135deg,var(--brand),var(--accent));color:white;border:none;padding:10px 14px;border-radius:12px;font-weight:700;}
.btn:active{transform:translateY(1px)}

.ad-slot{border:1px dashed var(--line);border-radius:14px;padding:14px;margin:16px 0;color:var(--muted);text-align:center}
hr{border:0;border-top:1px solid var(--line);margin:24px 0}
.small{font-size:.92rem;color:var(--muted)}
footer{color:var(--muted);border-top:1px solid var(--line);margin-top:36px}
.footer-links a{margin-left:14px}

/* Cookie banner */
.cookie{position:fixed;left:16px;right:16px;bottom:16px;z-index:50;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:12px 14px;display:none}
.cookie.show{display:flex;align-items:center;justify-content:space-between;gap:12px}
.cookie .actions{display:flex;gap:8px}
.cookie .actions .btn{padding:8px 12px;font-weight:700}

.icon{width:18px;height:18px;display:inline-block;flex-shrink:0}
.card .icon{width:18px!important;height:18px!important}
.icon-btn{width:40px;height:40px}

#bulbFill,#bulbOutline{display:none}
@media (prefers-color-scheme: light){#bulbFill{display:inline}}
@media (prefers-color-scheme: dark){#bulbOutline{display:inline}}
[data-theme='light'] #bulbFill{display:inline}[data-theme='light'] #bulbOutline{display:none}
[data-theme='dark'] #bulbFill{display:none}[data-theme='dark'] #bulbOutline{display:inline}
[data-theme='dark'] .theme-toggle{color:#fff}
[data-theme='light'] .theme-toggle{color:#111418}


/* Cross-browser button resets */
.theme-toggle,.icon-btn{appearance:none;-webkit-appearance:none;-moz-appearance:none;}

/* Integrate search icon into the field */
.search{gap:6px}
.search .icon-btn{background:transparent;border:0;width:36px;height:36px;box-shadow:none}
.search input{height:36px;padding-left:12px}

/* Force single bulb icon visibility (Firefox) */
#bulbFill,#bulbOutline{display:none !important}
@media (prefers-color-scheme: light){#bulbFill{display:inline-block !important}}
@media (prefers-color-scheme: dark){#bulbOutline{display:inline-block !important}}
[data-theme='light'] #bulbFill{display:inline-block !important}[data-theme='light'] #bulbOutline{display:none !important}
[data-theme='dark'] #bulbFill{display:none !important}[data-theme='dark'] #bulbOutline{display:inline-block !important}



/* Align badges at the bottom across all cards */
.card a{display:flex;flex-direction:column;gap:6px;height:100%}
.card .badge{margin-top:auto;align-self:flex-start}

/* Limit tip paragraph width so it doesn't stretch too far */
.hero .tip{max-width:520px}


/* CTA button at the bottom of each card */
.card a{display:flex;flex-direction:column;gap:10px;height:100%}
.card .cta{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:6px;border-radius:10px;padding:6px 10px;font-size:.9rem;font-weight:700;letter-spacing:.2px;background:linear-gradient(135deg,#ff7a18,#ffd84c);color:#0b0c10;}
.card .cta:after{content:"→";opacity:.9}

.hero .search{grid-column:1 / -1}
.hero .tip{grid-column:1 / -1;margin-top:6px;max-width:900px}

/* hero full-width placements */
.hero .search{grid-column:1 / -1 !important}
.hero .tip{grid-column:1 / -1 !important; margin-top:8px; max-width:900px; display:block}

[data-theme='light'] .card .cta{color:#fff !important;text-shadow:0 1px 0 rgba(0,0,0,.15)}

/* CTA gradient for all tool pages */
.tool .btn{
  background:linear-gradient(135deg,#FF5C39,#FFD166)!important;
  border:0;
}
[data-theme='light'] .tool .btn{ color:#fff !important; text-shadow:0 1px 0 rgba(0,0,0,.15) }
[data-theme='dark'] .tool .btn{ color:#111 !important; text-shadow:none }
.tool .btn:hover{ filter:brightness(.98) }
.tool .btn:active{ transform:translateY(1px) }


/* === Global UI Patch (append to /assets/css/style.css) ======================
   - Warm CTA gradient for all tool buttons and home cards
   - Consistent inputs (text/email/url/search/number + select + textarea)
   - Crisp focus states and placeholder color for both themes
============================================================================ */
.tool .btn,.card .cta,.btn-cta{background:linear-gradient(135deg,#FF5C39,#FFD166)!important;border:0!important;color:#fff!important;text-shadow:0 1px 0 rgba(0,0,0,.15)}
[data-theme='dark'] .tool .btn,[data-theme='dark'] .card .cta,[data-theme='dark'] .btn-cta{color:#111!important;text-shadow:none}
.tool .btn:hover,.card .cta:hover,.btn-cta:hover{filter:brightness(.98)}
.tool .btn:active,.card .cta:active,.btn-cta:active{transform:translateY(1px)}
input[type="text"],input[type="email"],input[type="url"],input[type="search"],input[type="number"],input[type="password"],select,textarea{appearance:none;-webkit-appearance:none;-moz-appearance:none;background:var(--card);color:var(--text);border:1px solid var(--line);border-radius:12px;height:36px;padding:8px 12px;box-shadow:var(--shadow-small,none);transition:border-color .15s,box-shadow .15s,background .15s}
textarea{min-height:110px;line-height:1.4;resize:vertical}
select{padding-right:32px}
::placeholder{color:color-mix(in srgb,var(--text) 50%,transparent);opacity:.7}
::-webkit-input-placeholder{color:color-mix(in srgb,var(--text) 50%,transparent)}
::-moz-placeholder{color:color-mix(in srgb,var(--text) 50%,transparent)}
input:focus,select:focus,textarea:focus{outline:2px solid color-mix(in srgb,var(--brand,#4f46e5) 40%,transparent);outline-offset:0}
input:disabled,select:disabled,textarea:disabled{opacity:.7;cursor:not-allowed}
.compact input[type="text"],.compact select{height:32px;padding:6px 10px;border-radius:10px}
.card .cta{display:inline-block;padding:10px 14px;border-radius:12px}

/* Pretty Number Stepper */
.num-input{position:relative;display:inline-flex;align-items:stretch}
.num-input>input[type="number"]{padding-right:58px}
.num-input .stepper{position:absolute;right:6px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:4px;pointer-events:auto}
.num-input .stepper button{width:24px;height:16px;border-radius:6px;border:1px solid var(--line);background:var(--card);color:var(--text);display:grid;place-items:center;box-shadow:var(--shadow-small,none);cursor:pointer;padding:0}
.num-input .stepper button:hover{filter:brightness(1.05)}
.num-input .stepper button:active{transform:translateY(1px)}
.num-input .stepper svg{width:12px;height:12px}

/* 1) Hide native number spinners (Chrome/Edge/Safari + Firefox) */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; }

/* 2) Compact, cleaner custom stepper (v2) */
.num-input > input[type="number"] { padding-right: 52px; }        /* tighten right padding */
.num-input .stepper { right: 8px; gap: 2px; }                     /* smaller gap, snug to edge */
.num-input .stepper button {
  width: 22px; height: 14px; border-radius: 6px;
  background: color-mix(in srgb, var(--card) 90%, var(--text) 10%);
  border: 1px solid color-mix(in srgb, var(--line) 85%, transparent);
  display: grid; place-items: center; padding: 0; cursor: pointer;
}
[data-theme="dark"] .num-input .stepper button {
  background: color-mix(in srgb, var(--card) 85%, #000 15%);
}
.num-input .stepper button:hover { filter: brightness(1.07); }
.num-input .stepper button:active { transform: translateY(1px); }
.num-input .stepper svg { width: 10px; height: 10px; }            /* slightly smaller caret */

/* === Show 8 by default; expand on 'Browse all' === */
.tool-grid .tool-card:nth-child(n+9),
.tool-grid .card:nth-child(n+9){ display:none; }
.tool-grid.is-expanded .tool-card,
.tool-grid.is-expanded .card{ display:block; }

/* === Material Symbols icon pill === */
.icon-ms{
  width:36px;height:36px;flex:0 0 36px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;
  font-family:"Material Symbols Rounded";font-size:22px;line-height:1;
  letter-spacing:normal;font-variation-settings:"FILL" 0,"wght" 400,"GRAD" 0,"opsz" 24;
  background:var(--icon-bg);color:var(--icon-fg);
}
.tool-card h3, .card h3{ display:flex;align-items:center;gap:10px; }

/* Icon color presets */
.ic-blue   { --icon-bg:#EAF2FF; --icon-fg:#2B6CB0; }
.ic-teal   { --icon-bg:#E6FFFA; --icon-fg:#0F766E; }
.ic-purple { --icon-bg:#F1E8FF; --icon-fg:#6B46C1; }
.ic-amber  { --icon-bg:#FFF6E5; --icon-fg:#B7791F; }
.ic-rose   { --icon-bg:#FFE8ED; --icon-fg:#C53030; }
.ic-green  { --icon-bg:#E8F7ED; --icon-fg:#2F855A; }
.ic-cyan   { --icon-bg:#E6FBFF; --icon-fg:#0EA5B7; }
.ic-indigo { --icon-bg:#ECEAFE; --icon-fg:#4338CA; }
.ic-orange { --icon-bg:#FFF0E6; --icon-fg:#C05621; }
.ic-lime   { --icon-bg:#F3FEE6; --icon-fg:#3F6212; }
.ic-slate  { --icon-bg:#EEF2F7; --icon-fg:#334155; }
.ic-violet { --icon-bg:#F2EAFE; --icon-fg:#7C3AED; }
.ic-yellow1{--icon-fg:#ffd277;} .ic-pink{--icon-fg:#ff52be}

/* === Icon centering tweak (optical alignment across browsers) === */
.tool-card h3, .card h3 { display:flex; align-items:center; gap:10px; }
.icon-ms{
  width:34px; height:34px; /* slightly tighter looks better next to 18–20px titles */
  display:inline-grid; place-items:center;
  border-radius:999px;
  line-height:1;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  transform:translateY(1px); /* nudge down 1px for optical centering */
  font-family:"Material Symbols Rounded"; font-size:22px;
  letter-spacing:normal; font-variation-settings:"FILL" 0,"wght" 400,"GRAD" 0,"opsz" 24;
}

/* === Simplify tool icons: no background circle, 50% larger glyph === */
.tool-card h3, .card h3 { display:flex; align-items:center; gap:10px; }
.icon-ms{
  background:none !important;
  width:auto; height:auto; border-radius:0;
  display:inline-block; vertical-align:middle;
  line-height:1; transform:none;
  font-family:"Material Symbols Rounded";
  font-size:33px; /* 50% larger than 22px */
  letter-spacing:normal;
  font-variation-settings:"FILL" 0,"wght" 400,"GRAD" 0,"opsz" 24;
  color:var(--icon-fg, currentColor);
}
/* Color presets now only set the foreground color */
.ic-blue   { --icon-fg:#2B6CB0; }
.ic-teal   { --icon-fg:#0F766E; }
.ic-purple { --icon-fg:#6B46C1; }
.ic-amber  { --icon-fg:#B7791F; }
.ic-rose   { --icon-fg:#C53030; }
.ic-green  { --icon-fg:#2F855A; }
.ic-cyan   { --icon-fg:#0EA5B7; }
.ic-indigo { --icon-fg:#4338CA; }
.ic-orange { --icon-fg:#C05621; }
.ic-lime   { --icon-fg:#3F6212; }
.ic-slate  { --icon-fg:#334155; }
.ic-violet { --icon-fg:#7C3AED; }

/* === Icon size update: support both class names (.icon-ms and .ms-icon) === */
.tool-card h3, .card h3 { display:flex; align-items:center; gap:10px; }

.icon-ms, .ms-icon{
  background:none !important;
  width:auto; height:auto; border-radius:0;
  display:inline-block; vertical-align:middle;
  line-height:1; transform:none;
  font-family:"Material Symbols Rounded" !important;
  font-size:33px !important; /* bigger icons */
  letter-spacing:normal;
  font-variation-settings:"FILL" 0,"wght" 400,"GRAD" 0,"opsz" 24 !important;
  color:var(--icon-fg, currentColor);
}

/* Foreground-only colors */
.ic-blue   { --icon-fg:#2B6CB0; }
.ic-teal   { --icon-fg:#0F766E; }
.ic-purple { --icon-fg:#6B46C1; }
.ic-amber  { --icon-fg:#B7791F; }
.ic-rose   { --icon-fg:#C53030; }
.ic-green  { --icon-fg:#2F855A; }
.ic-cyan   { --icon-fg:#0EA5B7; }
.ic-indigo { --icon-fg:#4338CA; }
.ic-orange { --icon-fg:#C05621; }
.ic-lime   { --icon-fg:#3F6212; }
.ic-slate  { --icon-fg:#334155; }
.ic-violet { --icon-fg:#7C3AED; }


/* === SimpleWeb.tools — global tweaks (2025-09-23) === */

/* 1) Space between cards */
.tool + .tool{ margin-top:20px; }

/* 2) FAQ readability */
.tool.faq h2{ margin:0 0 10px 0; }
.tool.faq dl{ margin:0; padding:0; }
.tool.faq dt{
  font-weight:700;
  margin-top:16px;
}
.tool.faq dd{
  margin:6px 0 18px 0;
  color: var(--muted); /* 80% black feel / dark gray, theme-aware */
}

/* Tool card spacing */
.tool .card .row + .row,
.tool .card .stack > * + * { margin-top:20px !important; }
/* .tool .card + .card { margin-top:20px !important; } */

/* Kill any auto-injected heading icons/labels */
.tool h1::before, .tool h2::before, .tool h3::before,
.card h1::before, .card h2::before, .card h3::before,
.tool .apps::before, .tool [class*="apps"]::before { content:none !important; display:none !important; }

/* Breadcrumbs */
.breadcrumbs{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;
  font-size:.92rem;color:var(--muted);}
.breadcrumbs a{color:var(--text);opacity:.75;text-decoration:none}
.breadcrumbs a:hover{opacity:1;text-decoration:underline}
.breadcrumbs .sep{opacity:.35;user-select:none}
.breadcrumbs .current{opacity:1;font-weight:600}
@media (max-width:640px){ .breadcrumbs{font-size:.88rem} }

/* Breadcrumbs */
nav.breadcrumbs{
  max-width: 1040px;          /* poravnanje sa layoutom */
  margin: 1px auto 0;         /* malo odmaknuto ispod top bara */
  padding: 0 0px;            /* isti horizontalni padding kao stranica */
  color: var(--muted);
  font-size: .95rem;
}
nav.breadcrumbs ol{
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
nav.breadcrumbs li{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
nav.breadcrumbs li + li::before{
  content: "/";
  opacity: .5;
}
nav.breadcrumbs a{
  color: inherit;
  text-decoration: none;
}
nav.breadcrumbs [aria-current="page"] span{
  font-weight: 600;
  color: var(--text);
}

@media (max-width: 720px){
  nav.breadcrumbs{
    font-size: .9rem;
    padding: 0 12px;
  }
}