/* ═══════════════════════════════════════════════════════════════
   Assam Converter — Shared Tools Theme (Editorial / Warm Paper)
   Drop into any tool page after its existing <style> block.
   Overrides the default blue/orange theme to match brand system.
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,400;1,9..144,500;1,9..144,600&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root{
  --paper:#f6f1e7;
  --paper-2:#fbf6ec;
  --paper-3:#efe7d6;
  --paper-4:#e6dcc8;
  --ink:#1a1814;
  --ink-2:#5c5347;
  --ink-3:#8a7e6a;
  --line:rgba(26,24,20,.10);
  --line-2:rgba(26,24,20,.18);
  --accent:#d94f1e;
  --accent-2:#b8401a;
  --accent-soft:rgba(217,79,30,.10);
  --accent-glow:rgba(217,79,30,.25);
  --ok:#3d8b5e;
  --warn:#a8842f;
  --err:#c44231;
  --serif:'Fraunces',Georgia,serif;
  --sans:'Inter',system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --tool-shadow:0 1px 2px rgba(26,24,20,.04),0 12px 32px -12px rgba(26,24,20,.12);
  --tool-shadow-lg:0 1px 2px rgba(26,24,20,.04),0 24px 60px -20px rgba(26,24,20,.18);
}

/* ── Page base ─────────────────────────── */
*{font-family:var(--sans)!important;-webkit-tap-highlight-color:transparent}
body{
  background:
    radial-gradient(ellipse at top right,rgba(217,79,30,.06),transparent 50%),
    radial-gradient(ellipse at bottom left,rgba(58,110,165,.04),transparent 50%),
    var(--paper)!important;
  color:var(--ink)!important;
  padding:2.5rem 1rem 3rem!important;
  position:relative;
}
body::before{
  content:"";position:fixed;inset:0;
  background-image:
    radial-gradient(circle at 1px 1px,rgba(26,24,20,.06) 1px,transparent 1px);
  background-size:32px 32px;
  pointer-events:none;opacity:.5;z-index:0;
}
.wrap,.container{position:relative;z-index:1;max-width:1100px!important}

/* ── Back link (editorial pill) ────────── */
.back-home{margin-bottom:2rem!important}
.back-home a,.back-link{
  background:var(--paper-2)!important;
  color:var(--ink)!important;
  border:1px solid var(--line)!important;
  border-radius:100px!important;
  padding:.6rem 1.3rem .6rem 1.05rem!important;
  font-family:var(--mono)!important;
  font-size:.74rem!important;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:600!important;
  display:inline-flex;align-items:center;gap:.55rem!important;
  box-shadow:0 1px 2px rgba(26,24,20,.04)!important;
  transition:all .2s ease!important;
  text-decoration:none!important;
}
.back-home a::before,.back-link::before{
  content:"";width:14px;height:1px;background:var(--accent);
  transition:all .2s ease;
}
.back-home a:hover,.back-link:hover{
  background:var(--ink)!important;
  color:var(--paper)!important;
  border-color:var(--ink)!important;
  transform:translateX(-3px)!important;
  box-shadow:0 4px 12px rgba(26,24,20,.18)!important;
}
.back-home a:hover::before,.back-link:hover::before{background:var(--accent)}
.back-home a i,.back-link i{font-size:.7rem!important}

/* ── Main card (paper with deckle edge) ── */
.card-converter,.card-merger,.card-rotate,.card-reorder,
.card-pdf-gray,.card-pdf-unlock,.card-pdf-compress{
  background:var(--paper-2)!important;
  border-radius:24px!important;
  padding:2.4rem 2rem!important;
  border:1px solid var(--line)!important;
  box-shadow:var(--tool-shadow-lg)!important;
  margin-bottom:1.5rem!important;
  position:relative;
  overflow:hidden;
}
.card-converter::before,.card-merger::before,.card-rotate::before,
.card-reorder::before,.card-pdf-gray::before,.card-pdf-unlock::before,
.card-pdf-compress::before{
  content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,transparent 0,var(--accent) 20%,var(--accent) 80%,transparent 100%);
  opacity:.85;
}

/* ── Card header (editorial display) ──── */
.card-header{
  display:flex!important;
  align-items:center!important;
  gap:1.1rem!important;
  margin-bottom:2rem!important;
  padding-bottom:1.4rem!important;
  border-bottom:1px dashed var(--line-2);
  position:relative;
}
.card-header::after{
  content:"PDF TOOL · ASSAM CONVERTER";
  position:absolute;
  top:-2px;right:0;
  font-family:var(--mono);
  font-size:.6rem;
  font-weight:600;
  color:var(--ink-3);
  letter-spacing:.16em;
  text-transform:uppercase;
}
.card-header i{
  font-size:1.4rem!important;
  color:var(--accent)!important;
  background:var(--accent-soft)!important;
  padding:.85rem!important;
  border-radius:18px!important;
  width:54px;height:54px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(217,79,30,.2);
  box-shadow:0 4px 12px rgba(217,79,30,.1);
}
.card-header h1{
  font-family:var(--serif)!important;
  font-size:1.85rem!important;
  font-weight:500!important;
  color:var(--ink)!important;
  letter-spacing:-.025em!important;
  line-height:1.15!important;
}
.card-header h1 span{
  color:var(--accent)!important;
  font-style:italic;
  font-weight:500!important;
}

/* ── Upload box (editorial drop zone) ──── */
.upload-box{
  border:1.5px dashed var(--line-2)!important;
  border-radius:18px!important;
  padding:3rem 1.5rem!important;
  text-align:center!important;
  background:
    repeating-linear-gradient(45deg,transparent,transparent 16px,rgba(26,24,20,.015) 16px,rgba(26,24,20,.015) 32px),
    var(--paper)!important;
  transition:all .25s ease!important;
  cursor:pointer!important;
  margin-bottom:1.6rem!important;
  position:relative;
}
.upload-box::before{
  content:"DROP ZONE";
  position:absolute;
  top:.85rem;left:50%;transform:translateX(-50%);
  font-family:var(--mono);
  font-size:.6rem;
  font-weight:700;
  letter-spacing:.18em;
  color:var(--ink-3);
  background:var(--paper-2);
  padding:0 .5rem;
}
.upload-box:hover{
  border-color:var(--accent)!important;
  background:
    repeating-linear-gradient(45deg,transparent,transparent 16px,rgba(217,79,30,.03) 16px,rgba(217,79,30,.03) 32px),
    var(--accent-soft)!important;
  transform:translateY(-1px);
}
.upload-box.drag-over,.upload-box.dragover{
  border-color:var(--accent)!important;
  background:var(--accent-soft)!important;
  border-style:solid!important;
}
.upload-box i{
  font-size:2.6rem!important;
  color:var(--accent)!important;
  margin-bottom:1rem!important;
  opacity:.85;
}
.upload-box h3{
  font-family:var(--serif)!important;
  font-weight:500!important;
  font-size:1.35rem!important;
  margin-bottom:.45rem!important;
  letter-spacing:-.015em;
  color:var(--ink)!important;
}
.upload-box p{
  color:var(--ink-2)!important;
  margin-bottom:1.6rem!important;
  font-size:.92rem!important;
  font-style:italic;
  font-family:var(--serif)!important;
}

/* ── Buttons (warm primary) ────────────── */
.btn-upload,
button[class*="btn-primary"],
.btn-merge,.btn-process,.btn-convert,.btn-download,
.btn-grayscale,.btn-rotate,.btn-reorder,.btn-split,.btn-lock,.btn-unlock{
  background:var(--accent)!important;
  background-image:linear-gradient(180deg,var(--accent),var(--accent-2))!important;
  color:#fff!important;
  border:1px solid rgba(184,64,26,.5)!important;
  padding:.85rem 2rem!important;
  border-radius:14px!important;
  font-weight:600!important;
  font-size:.92rem!important;
  letter-spacing:.01em!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:.55rem!important;
  cursor:pointer!important;
  transition:all .2s ease!important;
  box-shadow:0 1px 2px rgba(184,64,26,.2),0 8px 20px -8px rgba(217,79,30,.5)!important;
  text-transform:none!important;
  font-family:var(--sans)!important;
  backdrop-filter:none!important;
}
.btn-upload:hover,
button[class*="btn-primary"]:hover,
.btn-merge:hover,.btn-process:hover,.btn-convert:hover,.btn-download:hover,
.btn-grayscale:hover,.btn-rotate:hover,.btn-reorder:hover,.btn-split:hover,
.btn-lock:hover,.btn-unlock:hover{
  background:var(--accent-2)!important;
  background-image:linear-gradient(180deg,var(--accent-2),#9a3614)!important;
  transform:translateY(-2px)!important;
  box-shadow:0 1px 2px rgba(184,64,26,.3),0 14px 28px -10px rgba(217,79,30,.55)!important;
}
.btn-upload:active,
.btn-merge:active,.btn-process:active{
  transform:translateY(0)!important;
}
.btn-upload i{font-size:.95rem!important;color:#fff!important}

/* Secondary / ghost buttons */
.btn-secondary,.btn-cancel,.btn-clear,.btn-remove-all,
button[class*="ghost"],button[class*="outline"]{
  background:var(--paper-2)!important;
  background-image:none!important;
  color:var(--ink)!important;
  border:1.5px solid var(--line-2)!important;
  box-shadow:none!important;
  padding:.78rem 1.5rem!important;
  border-radius:12px!important;
  font-weight:500!important;
}
.btn-secondary:hover,.btn-cancel:hover,.btn-clear:hover,
.btn-remove-all:hover{
  border-color:var(--accent)!important;
  color:var(--accent)!important;
  background:var(--accent-soft)!important;
  transform:translateY(-1px)!important;
}

/* ── Preview area & items ──────────────── */
.preview-area{margin:1.8rem 0!important}
.preview-header{
  display:flex!important;
  justify-content:space-between!important;
  align-items:center!important;
  margin-bottom:1rem!important;
  padding-bottom:.7rem;
  border-bottom:1px dashed var(--line);
}
.preview-title{
  font-family:var(--serif)!important;
  font-weight:500!important;
  font-size:1.1rem!important;
  color:var(--ink)!important;
  letter-spacing:-.01em;
}
.preview-title::before{
  content:"FILES · ";
  font-family:var(--mono);
  font-size:.66rem;
  font-weight:700;
  color:var(--ink-3);
  letter-spacing:.14em;
  margin-right:.3rem;
}
.preview-grid,.file-list{
  display:grid!important;
  grid-template-columns:repeat(auto-fill,minmax(160px,1fr))!important;
  gap:1rem!important;
}
.preview-item,.file-item{
  background:var(--paper)!important;
  border-radius:12px!important;
  padding:.85rem!important;
  border:1px solid var(--line)!important;
  text-align:center!important;
  transition:all .2s ease!important;
  position:relative;
  box-shadow:0 1px 2px rgba(26,24,20,.04);
}
.preview-item:hover,.file-item:hover{
  border-color:var(--accent)!important;
  box-shadow:0 4px 16px rgba(217,79,30,.12)!important;
  transform:translateY(-2px);
}
.preview-item img{
  border-radius:8px!important;
  border:1px solid var(--line)!important;
}

/* ── Steps indicator ───────────────────── */
.steps{
  display:flex!important;
  gap:.5rem!important;
  justify-content:center!important;
  margin-bottom:1.6rem!important;
  flex-wrap:wrap;
}
.step{
  background:var(--paper)!important;
  border:1.5px solid var(--line)!important;
  border-radius:100px!important;
  padding:.5rem 1.1rem!important;
  font-family:var(--mono)!important;
  font-size:.72rem!important;
  font-weight:600!important;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ink-2)!important;
  display:inline-flex;
  align-items:center;
  gap:.42rem;
  transition:all .2s ease;
}
.step i{font-size:.7rem;color:var(--ink-3)}
.step.active{
  background:var(--ink)!important;
  color:var(--paper)!important;
  border-color:var(--ink)!important;
}
.step.active i{color:var(--accent)!important}
.step.completed{
  background:var(--accent-soft)!important;
  color:var(--accent)!important;
  border-color:var(--accent)!important;
}

/* ── Inputs / form fields ──────────────── */
input[type="text"],input[type="password"],input[type="number"],
input[type="email"],input[type="search"],select,textarea{
  background:var(--paper-2)!important;
  border:1.5px solid var(--line-2)!important;
  border-radius:12px!important;
  padding:.7rem 1rem!important;
  color:var(--ink)!important;
  font-size:.92rem!important;
  font-family:var(--sans)!important;
  transition:all .2s ease!important;
  outline:none!important;
}
input:focus,select:focus,textarea:focus{
  border-color:var(--accent)!important;
  box-shadow:0 0 0 4px var(--accent-soft)!important;
}

/* Form labels */
label{
  font-family:var(--mono)!important;
  font-size:.7rem!important;
  font-weight:600!important;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--ink-3)!important;
  margin-bottom:.4rem!important;
  display:block;
}

/* ── Progress bar ──────────────────────── */
.progress,.progress-bar-wrap,[class*="progress-container"]{
  background:var(--paper-3)!important;
  border-radius:100px!important;
  height:8px!important;
  overflow:hidden;
  border:1px solid var(--line);
}
.progress-bar,.progress > div,[class*="progress-fill"]{
  background:linear-gradient(90deg,var(--accent),var(--accent-2))!important;
  border-radius:100px!important;
  box-shadow:0 0 12px rgba(217,79,30,.3);
}

/* ── Alerts / messages ─────────────────── */
.alert,.message,[class*="success-message"],[class*="error-message"]{
  border-radius:12px!important;
  padding:.85rem 1.1rem!important;
  border:1.5px solid var(--line)!important;
  background:var(--paper-2)!important;
  font-size:.88rem!important;
  display:flex;
  align-items:center;
  gap:.6rem;
}
.alert-success,[class*="success"]{
  border-left:4px solid var(--ok)!important;
  background:rgba(61,139,94,.06)!important;
  color:#2c6845!important;
}
.alert-error,.alert-danger,[class*="error"],[class*="danger"]{
  border-left:4px solid var(--err)!important;
  background:rgba(196,66,49,.06)!important;
  color:#9a3a2c!important;
}
.alert-warning,[class*="warning"]{
  border-left:4px solid var(--warn)!important;
  background:rgba(168,132,47,.06)!important;
  color:#7a5e1f!important;
}

/* ── Modal ─────────────────────────────── */
.modal,[class*="modal"]:not(.modal-content):not(.modal-body):not(.modal-header){
  backdrop-filter:blur(4px);
}
.modal-content,[class*="modal-box"]{
  background:var(--paper-2)!important;
  border:1px solid var(--line)!important;
  border-radius:20px!important;
  box-shadow:0 24px 64px rgba(26,24,20,.25)!important;
}

/* ── Misc utility cleanup ──────────────── */
.bg-gradient,.noise-overlay{display:none!important}

/* Sticky/floating elements */
[class*="floating"],[class*="fab"]{
  background:var(--accent)!important;
  box-shadow:0 8px 24px rgba(217,79,30,.4)!important;
}

/* Tables */
table{
  background:var(--paper-2)!important;
  border-radius:12px;
  overflow:hidden;
  border:1px solid var(--line)!important;
}
th{
  background:var(--paper-3)!important;
  font-family:var(--mono)!important;
  font-size:.72rem!important;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--ink-2)!important;
  padding:.7rem 1rem!important;
  border-bottom:1.5px solid var(--line-2)!important;
}
td{
  padding:.65rem 1rem!important;
  border-bottom:1px solid var(--line)!important;
  color:var(--ink)!important;
}

/* Responsive */
@media(max-width:640px){
  body{padding:1.5rem .8rem 2rem!important}
  .card-converter,.card-merger,.card-rotate,.card-reorder,
  .card-pdf-gray,.card-pdf-unlock,.card-pdf-compress{
    padding:1.6rem 1.1rem!important;
    border-radius:18px!important;
  }
  .card-header h1{font-size:1.4rem!important}
  .card-header::after{display:none}
  .upload-box{padding:2rem 1rem!important}
}
