/* PikiPic fixed CSS */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap');
:root{--bg:#f7f9fb;--accent:#2563eb;--muted:#6b7280;--card:#ffffff;--radius:12px;--shadow:0 10px 30px rgba(16,24,40,0.06)}
*{box-sizing:border-box}html,body{height:100%;margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial;background:var(--bg);color:#0b1b2b}
.container{max-width:1100px;margin:28px auto;padding:20px}
.header{display:flex;justify-content:space-between;align-items:center;padding:10px 0}
.logo{display:flex;align-items:center;gap:12px;font-weight:700;color:var(--accent);font-size:20px}
.nav a{margin-left:16px;color:#0b1b2b;text-decoration:none;font-weight:600}
.hero{background:linear-gradient(180deg,#ffffff,#fbfdff);padding:32px;border-radius:12px;box-shadow:var(--shadow);display:flex;gap:24px;align-items:center}
.tool-left{flex:1}
.h1{font-size:28px;margin:0;color:#071230}
.lead{color:var(--muted);margin-top:8px}
.tool-right{width:480px}
.upload-area{background:linear-gradient(180deg,#fbfdff,#ffffff);padding:22px;border-radius:12px;border:1px dashed rgba(37,99,235,0.12);text-align:center}
.upload-icon{font-size:40px;color:var(--accent)}
.big-btn{background:var(--accent);color:white;padding:10px 14px;border-radius:10px;border:0;font-weight:700;cursor:pointer;margin-top:12px}
.hint{color:var(--muted);margin-top:8px}
.settings{margin-top:12px;background:#fff;padding:12px;border-radius:10px;border:1px solid rgba(11,37,64,0.03)}
.input-small{padding:8px;border-radius:8px;border:1px solid #e6eef9;width:110px}
.controls{margin-top:12px;display:flex;gap:10px;align-items:center}
.files-list{margin-top:12px;display:flex;flex-direction:column;gap:8px}
.file-item{background:#fff;border-radius:8px;padding:10px;border:1px solid rgba(11,37,64,0.03);display:flex;justify-content:space-between;align-items:center}








body {
  font-family: Arial, sans-serif;
  background: #f4f6f9;
  margin: 0;
  padding: 0;
  color: #333;
}

h1 {
  font-size: 2.5rem;
  font-weight: bold;
}

textarea {
  width: 100%;
  min-height: 220px;
  font-size: 1.1rem;
  padding: 15px;
  border-radius: 8px;
  border: 1px solid #ccc;
  resize: vertical;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  transition: border-color 0.3s, box-shadow 0.3s;
}

textarea:focus {
  border-color: #28a745;
  box-shadow: 0 0 5px rgba(40, 167, 69, 0.3);
  outline: none;
}

button {
  background: #007bff;
  border: none;
  color: white;
  padding: 12px 25px;
  font-size: 1.1rem;
  border-radius: 6px;
  cursor: pointer;
}

button:hover {
  background: #0056b3;
}

.main-tool-box {
  background: white;
  padding: 40px;
  border-radius: 16px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.05);
  margin-top: 30px;
  margin-bottom: 30px;
}

.ad-box {
  background-color: #f1f1f1;
  padding: 15px;
  border-radius: 12px;
  margin-bottom: 20px;
}

.nav
.navbar .nav-link,
.navbar-brand {
  color: #000000 !important;
}


textarea.form-control {
  min-height: 250px;
  font-size: 1rem;
}


footer {
  background: #222;
  color: #ccc;
  text-align: center;
  padding: 15px 0;
  margin-top: 40px;
}

/* Responsive Fix for Right Sidebar */
@media (min-width: 768px) {
  .col-12.d-md-none {
    display: none !important;
  }
}