/* ============================================
 Image Resizer — Global Styles
 ============================================ */

:root {
  /* Colors — Light mode */
  --bg: #f5f5f7;
  --fg: #0a0a0f;
  --muted: #66667a;
  --accent: #ff4d4d;
  --accent-hover: #ff4d4d;
  --accent-glow: rgba(255, 99, 99, 0.3);
  --line: #e5e5e8;
  --card: #ffffff;
  --success: #16a34a;
  --error: #dc2626;
  --ad-bg: #f0f0f5;

  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;

  --max-width: 760px;
  --radius: 12px;
  --gap: 24px;
}

*{
 box-sizing:border-box;
 margin:0;
 padding:0;
}

body{
 background:var(--bg);
 color:var(--fg);
 min-height:100vh;
 display:flex;
 flex-direction:column;
}

/* ============================================
 Layout
 ============================================ */

.wrap{
 width:100%;
 max-width:var(--max-width);
 margin:0 auto;
 padding:0 20px;
}

main{
 flex:1;
 padding:40px 0 60px;
}

/* ============================================
 Header
 ============================================ */

header{
 border-bottom:1px solid var(--line);
 background:var(--card);
 padding:16px 0;
}

header .wrap{
 display:flex;
 justify-content:space-between;
 align-items:center;
 gap:20px;
 flex-wrap:wrap;
}

.brand{
 font-size:18px;
 font-weight:700;
 text-decoration:none;
 color:var(--fg);
 letter-spacing:-0.01em;
}

header nav{
 display:flex;
 gap:20px;
 flex-wrap:wrap;
}

header nav a{
 color:var(--muted);
 text-decoration:none;
 font-size:15px;
 transition:color 0.15s ease;
}

header nav a:hover{
 color:var(--accent);
}

/* ============================================
 Typography
 ============================================ */

h1{
 font-size:clamp(28px,5vw,40px);
 line-height:1.15;
 letter-spacing:-0.02em;
 margin-bottom:16px;
 font-weight:750;
}

h2{
 font-size:clamp(22px,3vw,26px);
 line-height:1.2;
 letter-spacing:-0.01em;
 margin:40px 0 16px;
 font-weight:700;
}

h3{
 font-size:19px;
 margin:24px 0 12px;
 font-weight:650;
}

p{
 margin-bottom:16px;
}

a{
 color:var(--accent);
 text-decoration:underline;
 text-underline-offset:3px;
}

a:hover{
 color:var(--accent-hover);
}

.lead{
 font-size:18px;
 color:var(--muted);
 margin-bottom:32px;
}

.eyebrow{
 font-size:13px;
 text-transform:uppercase;
 letter-spacing:0.08em;
 color:var(--accent);
 font-weight:650;
 margin-bottom:8px;
}

/* ============================================
 Tool Card
 ============================================ */

.tool{
 background:var(--card);
 border:1px solid var(--line);
 border-radius:var(--radius);
 padding:28px;
 margin-bottom:32px;
}


.tool input[type="file"]{
 display:none;
}

.preview{
 margin:20px 0;
 text-align:center;
}

.preview img{
 max-width:100%;
 max-height:300px;
 border-radius:var(--radius);
 border:1px solid var(--line);
}

.info{
 font-size:14px;
 color:var(--muted);
 margin-top:8px;
 word-break:break-word;
}

.controls{
 margin:24px 0;
}

.controls label{
 display:block;
 font-weight:600;
 margin-bottom:8px;
}

.controls input[type="number"]{
 font-size:18px;
 padding:10px 14px;
 width:140px;
 border:1px solid var(--line);
 border-radius:10px;
 background:var(--bg);
 color:var(--fg);
}

.presets{
 display:flex;
 gap:8px;
 flex-wrap:wrap;
 margin-top:12px;
}

.presets button{
 padding:8px 14px;
 border:1px solid var(--line);
 border-radius:999px;
 background:var(--bg);
 color:var(--fg);
 font-size:14px;
 cursor:pointer;
 transition:all 0.15s ease;
}

.presets button:hover{
 border-color:var(--accent);
 color:var(--accent);
}

button.primary,
a.primary{
 display:inline-block;
 background:var(--accent);
 color:#fff;
 border:none;
 padding:14px 24px;
 border-radius:var(--radius);
 font-size:16px;
 font-weight:600;
 cursor:pointer;
 text-decoration:none;
 margin-top:8px;
 transition:background 0.15s ease;
}

button.primary:hover,
a.primary:hover{
 background:var(--accent-hover);
 color:#fff;
}

button.primary:disabled{
 opacity:0.5;
 cursor:not-allowed;
}

a.primary{
 margin-left:12px;
}

.status{
 margin-top:16px;
 font-size:15px;
 color:var(--muted);
}

.status.success{
 color:var(--success);
}

.status.error{
 color:var(--error);
}

/* ============================================
 Custom File Input
 ============================================ */

.file-label{
 display:inline-block;
 padding:14px 24px;
 background:var(--accent);
 color:#fff;
 border-radius:var(--radius);
 font-size:16px;
 font-weight:600;
 cursor:pointer;
 transition:background 0.15s ease;
 margin-bottom:16px;
 text-align:center;
 width:100%;
 max-width:320px;
}

.file-label:hover{
 background:var(--accent-hover);
}

.file-label:focus-within{
 outline:3px solid var(--accent);
 outline-offset:2px;
}

/* ============================================
 Ad Slots
 ============================================ */

.ad-slot{
 max-width:var(--max-width);
 margin:32px auto;
 padding:0 20px;
 min-height:280px;
 height:280px;
 display:flex;
 align-items:center;
 justify-content:center;
 background:var(--ad-bg);
 border-radius:var(--radius);
 color:var(--muted);
 font-size:13px;
 overflow:hidden;
}

@media (max-width:600px){
 .ad-slot{
 min-height:250px;
 height:250px;
}
}

.ad-slot::before{
 content:"Ad space";
 opacity:0.4;
}

/* ============================================
 Content Sections
 ============================================ */

.content{
 margin-top:40px;
}

.content ol,
.content ul{
 padding-left:24px;
 margin-bottom:16px;
}

.content li{
 margin-bottom:8px;
}

details{
 border-bottom:1px solid var(--line);
 padding:16px 0;
}

details summary{
 font-weight:600;
 cursor:pointer;
 font-size:17px;
 list-style:none;
 position:relative;
 padding-right:30px;
}

details summary::-webkit-details-marker{
 display:none;
}

details summary::after{
 content:"+";
 position:absolute;
 right:0;
 top:0;
 font-size:22px;
 color:var(--muted);
 transition:transform 0.15s ease;
}

details[open] summary::after{
 content:"−";
}

details p{
 color:var(--muted);
 margin-top:12px;
}

/* ============================================
 Footer
 ============================================ */

footer{
 border-top:1px solid var(--line);
 padding:24px 0;
 margin-top:auto;
 background:var(--card);
}

footer .wrap{
 text-align:center;
 color:var(--muted);
 font-size:14px;
}

footer a{
 color:var(--muted);
 margin:0 8px;
}

footer a:hover{
 color:var(--accent);
}

/* ============================================
 Accessibility
 ============================================ */

.skip{
 position:absolute;
 left:-9999px;
 top:auto;
 width:1px;
 height:1px;
 overflow:hidden;
}

.skip:focus{
 position:static;
 width:auto;
 height:auto;
 padding:12px 20px;
 background:var(--accent);
 color:#fff;
 border-radius:var(--radius);
 text-decoration:none;
 display:inline-block;
 margin:12px;
}

:focus-visible{
 outline:3px solid var(--accent);
 outline-offset:2px;
 border-radius:4px;
}

/* ============================================
 Responsive
 ============================================ */

@media (max-width:600px){
 .tool{
 padding:20px;
}

 header .wrap{
 gap:12px;
}

 header nav{
 gap:14px;
}

 a.primary{
 margin-left:0;
 display:block;
 text-align:center;
 margin-top:12px;
}
}

/* ============================================
 Dark Mode
 ============================================ */

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #08080c;
    --fg: #f5f5f7;
    --muted: #8b8b9a;
    --accent: #ff6363;
    --accent-hover: #ff8080;
    --accent-glow: rgba(255, 99, 99, 0.35);
    --line: #1c1c26;
    --card: #0f0f16;
    --ad-bg: #0f0f16;
  }
}

/* ============================================
 Reduced motion
 ============================================ */

@media (prefers-reduced-motion:reduce){
 *{
 transition:none !important;
 animation:none !important;
}
}

/* ============================================
 Header right + Language Switcher
 ============================================ */

.header-right{
 display:flex;
 align-items:center;
 gap:20px;
 flex-wrap:wrap;
}

.lang-switcher{
 position:relative;
}

.lang-btn{
 background:transparent;
 border:1px solid var(--line);
 border-radius:8px;
 padding:8px 12px;
 font-size:14px;
 font-weight:600;
 color:var(--fg);
 cursor:pointer;
 display:flex;
 align-items:center;
 gap:6px;
 transition:all 0.15s ease;
 font-family:inherit;
}

.lang-btn:hover{
 border-color:var(--accent);
 color:var(--accent);
}

.lang-icon{
 font-size:16px;
}

.lang-arrow{
 font-size:10px;
 opacity:0.6;
 transition:transform 0.15s ease;
}

.lang-switcher.open .lang-arrow{
 transform:rotate(180deg);
}

.lang-menu{
 position:absolute;
 top:calc(100% + 6px);
 right:0;
 background:var(--card);
 border:1px solid var(--line);
 border-radius:10px;
 padding:6px;
 min-width:200px;
 box-shadow:0 8px 24px rgba(0,0,0,0.12);
 list-style:none;
 margin:0;
 opacity:0;
 visibility:hidden;
 transform:translateY(-4px);
 transition:all 0.15s ease;
 z-index:100;
}

.lang-switcher.open .lang-menu{
 opacity:1;
 visibility:visible;
 transform:translateY(0);
}

.lang-menu li{
 margin:0;
}

.lang-menu a{
 display:block;
 padding:10px 12px;
 border-radius:6px;
 text-decoration:none;
 color:var(--fg);
 font-size:14px;
 transition:background 0.1s ease;
}

.lang-menu a:hover{
 background:var(--bg);
 color:var(--accent);
}


/* Raycast-inspired glow */
button.primary,
a.primary {
  background: linear-gradient(135deg, #ff6363, #ff4d4d);
  box-shadow: 0 4px 20px var(--accent-glow);
  transition: all 0.2s ease;
}

button.primary:hover,
a.primary:hover {
  background: linear-gradient(135deg, #ff4d4d, #ff3838);
  box-shadow: 0 8px 30px var(--accent-glow);
  transform: translateY(-2px);
}

button.primary:active,
a.primary:active {
  transform: translateY(0);
  box-shadow: 0 2px 10px var(--accent-glow);
}


/* Raycast-inspired glow */
button.primary,
a.primary {
  background: linear-gradient(135deg, #ff6363, #ff4d4d);
  box-shadow: 0 4px 20px var(--accent-glow);
  transition: all 0.2s ease;
}

button.primary:hover,
a.primary:hover {
  background: linear-gradient(135deg, #ff4d4d, #ff3838);
  box-shadow: 0 8px 30px var(--accent-glow);
  transform: translateY(-2px);
}

button.primary:active,
a.primary:active {
  transform: translateY(0);
  box-shadow: 0 2px 10px var(--accent-glow);
}