/* OceanofTools — ultimate_photo_filters_online.php
   Page-specific tool/workspace CSS only. Universal header/footer stays in /style/header_footer.css. */
/* ===== Migrated from image_tools/ultimate_photo_filters_online.php inline <style> ===== */
/* --- INHERITED THEME STYLES --- */
    h1 { font-size: 2.2rem; margin-bottom: 12px; background: linear-gradient(135deg, #1a75ff, #0d47aa); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-align: center; }
    .hero { text-align: center; padding: 50px 20px 30px; background: linear-gradient(135deg, #14b89a15 0%, #0d8d7615 100%); }
    .hero p { color: #555; font-size: 1.1rem; max-width: 750px; margin: 0 auto; opacity: 0.9; line-height: 1.6; }
    
    .container1 { max-width:none; margin: 0 auto; background: white; border-radius: 16px; box-shadow: 0 6px 25px rgba(0, 0, 0, 0.08); overflow: hidden; margin-left: 20px; margin-right: 20px; }
    
    .upload-section { text-align: center; padding: 40px; margin: 20px 25px; background: linear-gradient(135deg, #14b89a15 0%, #0d8d7615 100%); border-radius: 15px; border: 3px dashed #14b89a; cursor: pointer; transition: all 0.3s ease; }
    .upload-section:hover { background: linear-gradient(135deg, #14b89a25 0%, #0d8d7625 100%); border-color: #0d8d76; }
    .upload-section.dragover { background: linear-gradient(135deg, #14b89a35 0%, #0d8d7635 100%); border-color: #48bb78; }
    .upload-icon { font-size: 3rem; margin-bottom: 15px; }
    .upload-text { font-size: 18px; color: #2d3748; margin-bottom: 10px; font-weight: 600; }
    .upload-hint { color: #718096; font-size: 14px; }
    #fileInput { display: none; }

    .editor-container { display: none; padding: 20px; display: flex; flex-direction: column; gap: 20px; }
    
    /* Layout for Editor: Canvas Top, Tools Bottom */
    .editor-layout { display: flex; flex-wrap: wrap; gap: 20px; }
    .canvas-column { flex: 1; min-width: 300px; }
    .tools-column { flex: 1; min-width: 300px; max-height: 800px; overflow-y: auto; }

    .canvas-area { background: #f7fafc; padding: 20px; border-radius: 12px; border: 2px solid #e2e8f0; text-align: center; min-height: 400px; display: flex; align-items: center; justify-content: center; position: sticky; top: 20px; }
    #canvas { max-width: 100%; max-height: 600px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); border-radius: 4px; }

    /* Filter Categories & Grid */
    .filter-tabs { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 10px; margin-bottom: 15px; scrollbar-width: thin; }
    .tab-btn { padding: 8px 16px; border: none; background: #edf2f7; border-radius: 20px; cursor: pointer; font-weight: 600; color: #4a5568; white-space: nowrap; transition: 0.3s; }
    .tab-btn.active { background: #14b89a; color: white; }
    
    .filter-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 10px; max-height: 400px; overflow-y: auto; padding: 5px; }
    .filter-btn { display: flex; flex-direction: column; align-items: center; cursor: pointer; border: 2px solid transparent; border-radius: 8px; overflow: hidden; transition: 0.2s; background: white; }
    .filter-btn:hover { transform: translateY(-3px); }
    .filter-btn.active { border-color: #14b89a; box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2); }
    .filter-preview { width: 100%; height: 80px; object-fit: cover; background: #ddd; }
    .filter-name { font-size: 12px; padding: 5px; text-align: center; width: 100%; background: #f7fafc; font-weight: 500; }

    /* Advanced Sliders */
    .toolbar-section { background: white; border: 1px solid #e2e8f0; border-radius: 12px; padding: 20px; margin-bottom: 20px; }
    .section-title { font-weight: 700; margin-bottom: 15px; color: #2d3748; display: flex; align-items: center; gap: 8px; }
    
    .slider-group { margin-bottom: 15px; }
    .slider-header { display: flex; justify-content: space-between; margin-bottom: 5px; font-size: 14px; font-weight: 500; color: #4a5568; }
    .slider-range { width: 100%; height: 6px; background: #e2e8f0; border-radius: 3px; -webkit-appearance: none; outline: none; }
    .slider-range::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; background: #14b89a; border-radius: 50%; cursor: pointer; transition: 0.2s; }
    .slider-range::-webkit-slider-thumb:hover { transform: scale(1.1); }

    .action-buttons { display: flex; gap: 15px; justify-content: center; margin-top: 20px; flex-wrap: wrap; }
    .action-btn { padding: 14px 30px; font-size: 16px; font-weight: 600; border: none; border-radius: 10px; cursor: pointer; background: linear-gradient(135deg, #14b89a 0%, #0d8d76 100%); color: white; box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4); }
    .action-btn.secondary { background: linear-gradient(135deg, #718096 0%, #4a5568 100%); box-shadow: 0 4px 15px rgba(113, 128, 150, 0.4); }
    
   @media (max-width: 900px) {
        .editor-layout { 
            flex-direction: column; 
        }
        
        .canvas-area { 
            position: static; 
            padding: 10px; /* Reduced padding on mobile */
            min-height: auto; /* Allow height to shrink */
        }

        /* FIX: Allow column to shrink below 300px on mobile */
        .canvas-column { 
            min-width: 100% !important; 
            width: 100%;
        }

        /* FIX: Reduce container margins on mobile to give image more space */
        .container1 {
            margin-left: 10px;
            margin-right: 10px;
        }

        .editor-container {
            padding: 10px; /* Reduce internal padding */
        }
    }

/* ===== Migrated from image_tools/ultimate_photo_filters_online.php inline <style> ===== */
/* --- CORE THEME STYLES (Matching your Tool) --- */
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            background-color: #f8f9fa;
            margin: 0;
            padding-bottom: 50px;
            color: #2d3748;
        }

        h1 { 
            font-size: 2.2rem; 
            margin-bottom: 12px; 
            background: linear-gradient(135deg, #1a75ff, #0d47aa); 
            -webkit-background-clip: text; 
            -webkit-text-fill-color: transparent; 
            background-clip: text; 
            text-align: center; 
        }

        h2 {
            color: #2d3748;
            border-bottom: 2px solid #e2e8f0;
            padding-bottom: 10px;
            margin-top: 0;
            margin-bottom: 20px;
        }

        .hero { 
            text-align: center; 
            padding: 50px 20px 30px; 
            background: linear-gradient(135deg, #14b89a15 0%, #0d8d7615 100%); 
        }

        .container2 { 
            max-width:none; /* Slightly wider for text reading */
            margin: 0 auto; 
            background: white; 
            border-radius: 16px; 
            box-shadow: 0 6px 25px rgba(0, 0, 0, 0.08); 
            overflow: hidden; 
            margin-left: 20px; 
            margin-right: 20px;
            padding: 40px;
        }

        /* --- FEATURE GRID STYLES --- */
        .feature-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 25px;
            margin-bottom: 40px;
        }

        .feature-card {
            background: #f7fafc;
            border: 1px solid #edf2f7;
            border-radius: 12px;
            padding: 25px;
            text-align: center;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(102, 126, 234, 0.1);
            border-color: #14b89a;
        }

        .feature-icon {
            font-size: 2.5rem;
            margin-bottom: 15px;
            background: linear-gradient(135deg, #14b89a, #0d8d76);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .feature-title {
            font-weight: 700;
            font-size: 1.1rem;
            margin-bottom: 10px;
            color: #2d3748;
        }

        .feature-desc {
            font-size: 0.95rem;
            color: #718096;
            line-height: 1.6;
        }

        /* --- TEXT SECTIONS --- */
        .content-section {
            margin-bottom: 50px;
        }
        
        .content-text {
            font-size: 1.05rem;
            line-height: 1.8;
            color: #4a5568;
        }

        /* --- HOW TO USE STEPS --- */
        .step-list {
            counter-reset: step-counter;
            list-style: none;
            padding: 0;
        }

        .step-item {
            position: relative;
            padding-left: 60px;
            margin-bottom: 25px;
        }

        .step-item::before {
            counter-increment: step-counter;
            content: counter(step-counter);
            position: absolute;
            left: 0;
            top: 0;
            width: 40px;
            height: 40px;
            background: linear-gradient(135deg, #14b89a, #0d8d76);
            color: white;
            border-radius: 50%;
            text-align: center;
            line-height: 40px;
            font-weight: bold;
            font-size: 18px;
            box-shadow: 0 4px 10px rgba(102, 126, 234, 0.4);
        }

        .step-title {
            font-weight: 700;
            font-size: 1.1rem;
            color: #2d3748;
            display: block;
            margin-bottom: 5px;
        }

        /* --- MOBILE RESPONSIVE FIX (Applied here too) --- */
        @media (max-width: 768px) {
            .container1 {
                margin-left: 10px;
                margin-right: 10px;
                padding: 20px;
            }
            
            h1 { font-size: 1.8rem; }
            
            .feature-grid {
                grid-template-columns: 1fr; /* Stack features on mobile */
            }
        }

/* ============================================================
   Ultimate Photo Filter Studio — focused 3-column workspace
   2026-08-15
   ============================================================ */
body.ultimate-filter-page .filter-studio-hero{
  width:min(1380px,calc(100% - 28px))!important;
  max-width:1380px!important;
  margin:18px auto 16px!important;
  padding:18px 24px!important;
  min-height:0!important;
  display:grid!important;
  grid-template-columns:52px minmax(0,1fr)!important;
  align-items:center!important;
  gap:15px!important;
  text-align:left!important;
  border:1px solid rgba(255,255,255,.08)!important;
  border-radius:22px!important;
  background:linear-gradient(105deg,#10203f 0%,#163158 58%,#18446c 100%)!important;
  box-shadow:0 18px 44px rgba(7,20,38,.16)!important;
  color:#fff!important;
}
body.ultimate-filter-page .filter-hero-icon{
  width:52px!important;
  height:52px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:15px!important;
  border:1px solid rgba(255,255,255,.16)!important;
  background:rgba(255,255,255,.10)!important;
  font-size:1.65rem!important;
  line-height:1!important;
}
body.ultimate-filter-page .filter-hero-copy{min-width:0!important;}
body.ultimate-filter-page .filter-studio-hero h1{
  margin:0 0 4px!important;
  padding:0!important;
  text-align:left!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  background:none!important;
  font-size:clamp(1.65rem,2.8vw,2.35rem)!important;
  line-height:1.08!important;
  letter-spacing:-.035em!important;
}
body.ultimate-filter-page .filter-studio-hero p{
  margin:0!important;
  max-width:980px!important;
  color:#d5dfed!important;
  opacity:1!important;
  font-size:.92rem!important;
  line-height:1.5!important;
}

/* Give this editor substantially more horizontal room. */
body.ultimate-filter-page .container1{
  width:min(96vw,1580px)!important;
  max-width:1580px!important;
  margin:0 auto 26px!important;
  padding:16px!important;
  border-radius:24px!important;
  border:1px solid #dfe9e5!important;
  background:#fff!important;
  box-shadow:0 22px 55px rgba(15,35,30,.08)!important;
  overflow:visible!important;
}
body.ultimate-filter-page .upload-section{
  margin:0!important;
  padding:22px 18px!important;
  min-height:0!important;
  border:2px dashed #76cdbb!important;
  border-radius:18px!important;
  background:linear-gradient(135deg,rgba(20,184,154,.07),rgba(13,141,118,.035))!important;
}
body.ultimate-filter-page .upload-section .upload-icon{
  font-size:2rem!important;
  margin-bottom:7px!important;
}
body.ultimate-filter-page .upload-section .upload-text{
  margin-bottom:4px!important;
  font-size:1rem!important;
  font-weight:800!important;
}
body.ultimate-filter-page .upload-section .upload-hint{font-size:.8rem!important;}

body.ultimate-filter-page .editor-container{
  width:100%!important;
  padding:0!important;
  margin:0!important;
  gap:0!important;
  min-width:0!important;
}
body.ultimate-filter-page .editor-layout{
  width:100%!important;
  display:grid!important;
  grid-template-columns:minmax(250px,300px) minmax(460px,1fr) minmax(290px,330px)!important;
  gap:16px!important;
  align-items:start!important;
  min-width:0!important;
}
body.ultimate-filter-page :is(.filter-library-column,.canvas-column,.fine-tuning-column){
  min-width:0!important;
  width:auto!important;
  max-width:none!important;
}
body.ultimate-filter-page .filter-library-column,
body.ultimate-filter-page .fine-tuning-column{
  align-self:start!important;
}

body.ultimate-filter-page .toolbar-section,
body.ultimate-filter-page .canvas-card{
  margin:0!important;
  padding:16px!important;
  border:1px solid #e1ebe7!important;
  border-radius:20px!important;
  background:linear-gradient(180deg,#fff,#fbfdfc)!important;
  box-shadow:0 12px 28px rgba(15,35,30,.055)!important;
}
body.ultimate-filter-page .section-title{
  margin:0 0 14px!important;
  padding:0 0 12px!important;
  border-bottom:1px solid #e6efeb!important;
  color:#13241e!important;
  font-size:.96rem!important;
  font-weight:850!important;
}

/* LEFT: filter library */
body.ultimate-filter-page .filter-tabs{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:7px!important;
  margin:0 0 13px!important;
  padding:0!important;
  overflow:visible!important;
}
body.ultimate-filter-page .tab-btn{
  min-height:34px!important;
  padding:6px 10px!important;
  border:1px solid #dce8e3!important;
  border-radius:10px!important;
  background:#f6faf8!important;
  color:#52635d!important;
  box-shadow:none!important;
  font-size:.72rem!important;
  font-weight:800!important;
}
body.ultimate-filter-page .tab-btn:hover{
  border-color:#9dd8cb!important;
  background:#edf9f5!important;
  color:#0b7d69!important;
  transform:none!important;
}
body.ultimate-filter-page .tab-btn.active{
  border-color:#0f9f84!important;
  background:#0f9f84!important;
  color:#fff!important;
}
body.ultimate-filter-page .filter-grid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:9px!important;
  max-height:none!important;
  overflow:visible!important;
  padding:0!important;
}
body.ultimate-filter-page .filter-btn{
  min-width:0!important;
  border:1px solid #e2ebe7!important;
  border-radius:12px!important;
  background:#fff!important;
  box-shadow:0 5px 14px rgba(15,35,30,.04)!important;
  overflow:hidden!important;
}
body.ultimate-filter-page .filter-btn:hover{
  transform:translateY(-1px)!important;
  border-color:#abd9cf!important;
}
body.ultimate-filter-page .filter-btn.active{
  border:2px solid #0f9f84!important;
  box-shadow:0 0 0 3px rgba(15,159,132,.09)!important;
}
body.ultimate-filter-page .filter-preview{
  width:100%!important;
  height:68px!important;
  display:block!important;
  object-fit:cover!important;
}
body.ultimate-filter-page .filter-name{
  padding:6px 4px!important;
  background:#fbfdfc!important;
  color:#33443e!important;
  font-size:.68rem!important;
  font-weight:750!important;
  line-height:1.2!important;
}

/* CENTER: main image */
body.ultimate-filter-page .canvas-card{
  padding:0!important;
  overflow:hidden!important;
}
body.ultimate-filter-page .canvas-card-head{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
  padding:14px 16px!important;
  border-bottom:1px solid #e5eeea!important;
  background:#fbfdfc!important;
}
body.ultimate-filter-page .canvas-card-head strong{
  display:block!important;
  color:#13241e!important;
  font-size:.96rem!important;
  font-weight:850!important;
}
body.ultimate-filter-page .canvas-card-head span{
  display:block!important;
  margin-top:2px!important;
  color:#72817b!important;
  font-size:.72rem!important;
}
body.ultimate-filter-page .canvas-area{
  width:100%!important;
  min-height:520px!important;
  max-height:none!important;
  margin:0!important;
  padding:18px!important;
  position:static!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border:0!important;
  border-radius:0!important;
  background:linear-gradient(135deg,rgba(20,184,154,.035),rgba(255,255,255,.98)),repeating-conic-gradient(from 45deg,#f7faf9 0% 25%,#eef3f1 0% 50%) 50% / 22px 22px!important;
  overflow:hidden!important;
}
body.ultimate-filter-page #canvas{
  width:auto!important;
  height:auto!important;
  max-width:100%!important;
  max-height:68vh!important;
  border-radius:14px!important;
  box-shadow:0 16px 40px rgba(15,23,42,.16)!important;
  object-fit:contain!important;
}
body.ultimate-filter-page .canvas-card .action-buttons{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:9px!important;
  margin:0!important;
  padding:12px 14px!important;
  border-top:1px solid #e5eeea!important;
  background:#fff!important;
}
body.ultimate-filter-page .canvas-card .action-btn{
  min-height:42px!important;
  padding:0 16px!important;
  border-radius:12px!important;
  border:1px solid transparent!important;
  background:linear-gradient(135deg,#0f9f84,#0d8d76)!important;
  color:#fff!important;
  box-shadow:0 8px 18px rgba(15,159,132,.16)!important;
  font-size:.82rem!important;
  font-weight:800!important;
}
body.ultimate-filter-page .canvas-card .action-btn.secondary{
  border-color:#d8e3df!important;
  background:#fff!important;
  color:#34453f!important;
  box-shadow:none!important;
}

/* RIGHT: fine tuning */
body.ultimate-filter-page .fine-tuning-panel{
  padding:16px 17px 18px!important;
}
body.ultimate-filter-page .slider-group{
  margin:0!important;
  padding:13px 0!important;
  border-bottom:1px solid #edf2f0!important;
}
body.ultimate-filter-page .slider-group:last-child{border-bottom:0!important;}
body.ultimate-filter-page .slider-header{
  margin:0 0 9px!important;
  color:#43544e!important;
  font-size:.78rem!important;
  font-weight:700!important;
}
body.ultimate-filter-page .slider-header span{
  min-width:42px!important;
  padding:3px 7px!important;
  border-radius:8px!important;
  background:#edf8f4!important;
  color:#0d816c!important;
  text-align:center!important;
  font-size:.7rem!important;
  font-weight:850!important;
}
body.ultimate-filter-page .slider-range{
  width:100%!important;
  height:6px!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:999px!important;
  background:#dfe9e5!important;
  box-shadow:none!important;
}
body.ultimate-filter-page .slider-range::-webkit-slider-thumb{
  width:18px!important;
  height:18px!important;
  border:3px solid #fff!important;
  background:#0f9f84!important;
  box-shadow:0 2px 7px rgba(15,159,132,.28)!important;
}

/* Keep informational content readable, but the editor is deliberately wider. */
body.ultimate-filter-page .container2{
  width:min(1240px,calc(100% - 28px))!important;
  max-width:1240px!important;
  margin:26px auto!important;
}

@media (max-width:1250px){
  body.ultimate-filter-page .editor-layout{
    grid-template-columns:minmax(220px,260px) minmax(400px,1fr) minmax(250px,290px)!important;
    gap:12px!important;
  }
  body.ultimate-filter-page .filter-grid{grid-template-columns:1fr!important;}
  body.ultimate-filter-page .canvas-area{min-height:470px!important;}
}

@media (max-width:980px){
  body.ultimate-filter-page .editor-layout{
    grid-template-columns:1fr!important;
    gap:14px!important;
  }
  body.ultimate-filter-page .canvas-column{grid-row:1!important;}
  body.ultimate-filter-page .fine-tuning-column{grid-row:2!important;}
  body.ultimate-filter-page .filter-library-column{grid-row:3!important;}
  body.ultimate-filter-page .filter-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;}
  body.ultimate-filter-page .canvas-area{min-height:380px!important;}
}

@media (max-width:700px){
  body.ultimate-filter-page .filter-studio-hero{
    width:calc(100% - 18px)!important;
    grid-template-columns:44px minmax(0,1fr)!important;
    gap:11px!important;
    margin:10px auto 12px!important;
    padding:14px 15px!important;
    border-radius:17px!important;
  }
  body.ultimate-filter-page .filter-hero-icon{
    width:44px!important;
    height:44px!important;
    border-radius:12px!important;
    font-size:1.25rem!important;
  }
  body.ultimate-filter-page .filter-studio-hero h1{font-size:1.42rem!important;}
  body.ultimate-filter-page .filter-studio-hero p{font-size:.78rem!important;line-height:1.4!important;}
  body.ultimate-filter-page .container1{
    width:calc(100% - 14px)!important;
    padding:10px!important;
    border-radius:18px!important;
  }
  body.ultimate-filter-page .upload-section{padding:18px 12px!important;border-radius:15px!important;}
  body.ultimate-filter-page .filter-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  body.ultimate-filter-page .canvas-area{min-height:300px!important;padding:10px!important;}
  body.ultimate-filter-page .canvas-card .action-buttons{justify-content:stretch!important;}
  body.ultimate-filter-page .canvas-card .action-btn{flex:1 1 0!important;}
}

/* ===== 2026-08-15 refinement: rating lower, taller upload, scrollable library, centered actions ===== */
body.ultimate-filter-page .upload-section{
  min-height:190px!important;
  padding:34px 22px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
}
body.ultimate-filter-page .upload-section .upload-icon{font-size:2.25rem!important;margin-bottom:10px!important;}
body.ultimate-filter-page .upload-section .upload-text{font-size:1.1rem!important;margin-bottom:6px!important;}
body.ultimate-filter-page .upload-section .upload-hint{font-size:.88rem!important;}

body.ultimate-filter-page .filter-library-panel{
  max-height:760px!important;
  overflow:hidden!important;
}
body.ultimate-filter-page .filter-grid{
  max-height:575px!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  padding-right:4px!important;
  align-content:start!important;
}
body.ultimate-filter-page .filter-grid::-webkit-scrollbar{width:8px;}
body.ultimate-filter-page .filter-grid::-webkit-scrollbar-thumb{background:#b7d8d1;border-radius:999px;}
body.ultimate-filter-page .filter-grid::-webkit-scrollbar-track{background:#edf6f3;border-radius:999px;}

body.ultimate-filter-page .canvas-card .action-buttons{
  justify-content:center!important;
}

body.ultimate-filter-page .ultimate-rating-slot{
  width:min(96vw,1580px)!important;
  max-width:1580px!important;
  margin:14px auto 22px!important;
}
body.ultimate-filter-page .ultimate-rating-slot .oot-rating-mount,
body.ultimate-filter-page .ultimate-rating-slot #ootRatingMount{
  margin:0!important;
}

@media (max-width: 1100px){
  body.ultimate-filter-page .filter-library-panel{max-height:none!important;}
  body.ultimate-filter-page .filter-grid{max-height:360px!important;}
}
@media (max-width: 768px){
  body.ultimate-filter-page .upload-section{min-height:160px!important;padding:26px 18px!important;}
  body.ultimate-filter-page .ultimate-rating-slot{width:min(100% - 18px,1580px)!important;margin:12px auto 18px!important;}
  body.ultimate-filter-page .filter-grid{max-height:300px!important;}
}


/* Rating belongs below the main preview, inside the center column. */
body.ultimate-filter-page .canvas-column .ultimate-rating-slot{
  width:100%!important;
  max-width:none!important;
  margin:14px 0 0!important;
}
body.ultimate-filter-page .canvas-column .ultimate-rating-slot .oot-rating-mount,
body.ultimate-filter-page .canvas-column .ultimate-rating-slot #ootRatingMount{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
}

/* ===== Definitive rating placement: Main Image first, rating second ===== */
body.ultimate-filter-page .canvas-column{
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
}
body.ultimate-filter-page .canvas-column > .canvas-card{
  order:1!important;
  width:100%!important;
}
body.ultimate-filter-page .canvas-column > .ultimate-rating-slot{
  order:2!important;
  width:100%!important;
  max-width:none!important;
  margin:14px 0 0!important;
  position:static!important;
}
body.ultimate-filter-page .canvas-column > .oot-rating-mount{
  order:2!important;
  width:100%!important;
  max-width:none!important;
  margin:14px 0 0!important;
  position:static!important;
}
body.ultimate-filter-page .ultimate-rating-slot > .oot-rating-mount{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  position:static!important;
}

/* ============================================================
   Final mobile layout layer — Ultimate Photo Filter Studio
   Keeps the redesigned UI on phones instead of falling back to
   the legacy responsive layout.
   ============================================================ */
@media (max-width: 820px){
  body.ultimate-filter-page{
    overflow-x:hidden!important;
  }

  body.ultimate-filter-page .filter-studio-hero{
    width:calc(100% - 16px)!important;
    margin:8px auto 10px!important;
    padding:12px 13px!important;
    grid-template-columns:42px minmax(0,1fr)!important;
    gap:10px!important;
    border-radius:16px!important;
  }
  body.ultimate-filter-page .filter-hero-icon{
    width:42px!important;
    height:42px!important;
    border-radius:12px!important;
    font-size:1.15rem!important;
  }
  body.ultimate-filter-page .filter-studio-hero h1{
    font-size:clamp(1.2rem,5.7vw,1.55rem)!important;
    line-height:1.08!important;
    margin:0 0 3px!important;
  }
  body.ultimate-filter-page .filter-studio-hero p{
    font-size:.74rem!important;
    line-height:1.35!important;
    display:-webkit-box!important;
    -webkit-line-clamp:2!important;
    -webkit-box-orient:vertical!important;
    overflow:hidden!important;
  }

  body.ultimate-filter-page .container1{
    width:calc(100% - 10px)!important;
    max-width:none!important;
    margin:0 auto 16px!important;
    padding:8px!important;
    border-radius:16px!important;
    box-shadow:0 12px 30px rgba(15,35,30,.06)!important;
  }

  body.ultimate-filter-page .upload-section{
    min-height:150px!important;
    padding:22px 14px!important;
    border-radius:14px!important;
  }
  body.ultimate-filter-page .upload-section .upload-icon{
    font-size:1.85rem!important;
    margin-bottom:7px!important;
  }
  body.ultimate-filter-page .upload-section .upload-text{
    font-size:.98rem!important;
    text-align:center!important;
  }
  body.ultimate-filter-page .upload-section .upload-hint{
    font-size:.76rem!important;
    text-align:center!important;
  }

  body.ultimate-filter-page .editor-container{
    display:block!important;
    width:100%!important;
    padding:0!important;
    margin:0!important;
  }
  body.ultimate-filter-page .editor-layout{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:10px!important;
    width:100%!important;
    min-width:0!important;
  }

  /* Mobile order: preview first, filters second, tuning third. */
  body.ultimate-filter-page .canvas-column{
    grid-row:1!important;
    width:100%!important;
    min-width:0!important;
  }
  body.ultimate-filter-page .filter-library-column{
    grid-row:2!important;
    width:100%!important;
    min-width:0!important;
  }
  body.ultimate-filter-page .fine-tuning-column{
    grid-row:3!important;
    width:100%!important;
    min-width:0!important;
  }

  body.ultimate-filter-page .canvas-card,
  body.ultimate-filter-page .toolbar-section{
    width:100%!important;
    min-width:0!important;
    border-radius:15px!important;
    box-shadow:0 8px 20px rgba(15,35,30,.045)!important;
  }
  body.ultimate-filter-page .canvas-card-head{
    padding:11px 12px!important;
  }
  body.ultimate-filter-page .canvas-card-head strong{
    font-size:.9rem!important;
  }

  body.ultimate-filter-page .canvas-area{
    width:100%!important;
    min-height:240px!important;
    max-height:none!important;
    padding:9px!important;
    overflow:hidden!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
  }
  body.ultimate-filter-page #canvas{
    display:block!important;
    width:auto!important;
    height:auto!important;
    max-width:100%!important;
    max-height:62vh!important;
    margin:0 auto!important;
    object-fit:contain!important;
    border-radius:10px!important;
    box-shadow:0 10px 25px rgba(15,23,42,.13)!important;
  }

  body.ultimate-filter-page .canvas-card .action-buttons{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
    padding:10px!important;
    justify-content:center!important;
  }
  body.ultimate-filter-page .canvas-card .action-btn{
    width:100%!important;
    min-width:0!important;
    min-height:42px!important;
    padding:0 10px!important;
    font-size:.78rem!important;
  }

  /* Rating remains directly below the preview card. */
  body.ultimate-filter-page .canvas-column > .ultimate-rating-slot{
    width:100%!important;
    margin:10px 0 0!important;
    order:2!important;
  }
  body.ultimate-filter-page .ultimate-rating-slot .oot-rating-card{
    grid-template-columns:1fr!important;
    gap:10px!important;
    padding:14px!important;
    border-radius:14px!important;
  }
  body.ultimate-filter-page .ultimate-rating-slot .oot-stars,
  body.ultimate-filter-page .ultimate-rating-slot .oot-rating-login{
    justify-self:start!important;
    grid-column:1!important;
    margin:0!important;
  }

  /* Filter library stays compact with touch-friendly horizontal tabs. */
  body.ultimate-filter-page .filter-library-panel{
    max-height:none!important;
    padding:12px!important;
    overflow:hidden!important;
  }
  body.ultimate-filter-page .filter-library-panel .section-title,
  body.ultimate-filter-page .fine-tuning-panel .section-title{
    margin-bottom:10px!important;
    padding-bottom:9px!important;
  }
  body.ultimate-filter-page .filter-tabs{
    display:flex!important;
    flex-wrap:nowrap!important;
    gap:6px!important;
    width:100%!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    padding:0 0 5px!important;
    margin:0 0 9px!important;
    scrollbar-width:none!important;
    -webkit-overflow-scrolling:touch!important;
  }
  body.ultimate-filter-page .filter-tabs::-webkit-scrollbar{display:none!important;}
  body.ultimate-filter-page .tab-btn{
    flex:0 0 auto!important;
    min-height:34px!important;
    padding:5px 10px!important;
    white-space:nowrap!important;
  }
  body.ultimate-filter-page .filter-grid{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:7px!important;
    max-height:330px!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    padding:1px 3px 1px 0!important;
  }
  body.ultimate-filter-page .filter-preview{
    height:84px!important;
  }
  body.ultimate-filter-page .filter-name{
    padding:6px 3px!important;
    font-size:.7rem!important;
  }

  body.ultimate-filter-page .fine-tuning-panel{
    padding:12px 13px 14px!important;
  }
  body.ultimate-filter-page .slider-group{
    padding:11px 0!important;
  }
  body.ultimate-filter-page .slider-header{
    font-size:.8rem!important;
  }

  body.ultimate-filter-page .container2{
    width:calc(100% - 14px)!important;
    margin:16px auto!important;
  }
}

@media (max-width: 430px){
  body.ultimate-filter-page .filter-studio-hero p{display:none!important;}
  body.ultimate-filter-page .filter-studio-hero{align-items:center!important;}
  body.ultimate-filter-page .canvas-area{min-height:210px!important;}
  body.ultimate-filter-page .filter-preview{height:72px!important;}
  body.ultimate-filter-page .upload-section{min-height:138px!important;}
}


/* ===== Mobile hardening patch v3 ===== */
@media (max-width: 820px){
  body.ultimate-filter-page, body.ultimate-filter-page .container1, body.ultimate-filter-page .editor-layout,
  body.ultimate-filter-page .canvas-column, body.ultimate-filter-page .filter-library-column,
  body.ultimate-filter-page .fine-tuning-column, body.ultimate-filter-page .canvas-card,
  body.ultimate-filter-page .toolbar-section, body.ultimate-filter-page .canvas-area {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  body.ultimate-filter-page .editor-layout{display:flex!important;flex-direction:column!important;}
  body.ultimate-filter-page .canvas-column{order:1!important}
  body.ultimate-filter-page .canvas-column > .ultimate-rating-slot,
  body.ultimate-filter-page .canvas-column > .oot-rating-mount{order:2!important}
  body.ultimate-filter-page .filter-library-column{order:3!important}
  body.ultimate-filter-page .fine-tuning-column{order:4!important}
  body.ultimate-filter-page .canvas-card .action-btn{border-radius:14px!important}
}


/* ===== Mobile behavior correction v5: hide editor until upload + rating after fine tuning ===== */
body.ultimate-filter-page .ultimate-mobile-rating-slot{display:none;}
@media (max-width:820px){
  /* Never override the page's initial inline display:none. Only switch layout after JS sets display:flex. */
  body.ultimate-filter-page #editorContainer{width:100%!important;padding:0!important;margin:0!important;}
  body.ultimate-filter-page #editorContainer[style*="display: none"]{display:none!important;}
  body.ultimate-filter-page #editorContainer[style*="display: flex"]{display:block!important;}

  body.ultimate-filter-page .editor-layout{display:flex!important;flex-direction:column!important;gap:10px!important;}
  body.ultimate-filter-page .canvas-column{order:1!important;}
  body.ultimate-filter-page .filter-library-column{order:2!important;}
  body.ultimate-filter-page .ultimate-mobile-rating-slot{display:block!important;order:4!important;width:100%!important;min-width:0!important;margin:0!important;}
  body.ultimate-filter-page .fine-tuning-column{order:3!important;}

  /* Desktop rating slot is intentionally hidden on phones; JS moves the live rating card to the mobile slot. */
  body.ultimate-filter-page .canvas-column > #ultimateRatingSlot{display:none!important;}
  body.ultimate-filter-page .ultimate-mobile-rating-slot > .oot-rating-mount{display:block!important;width:100%!important;max-width:none!important;margin:0!important;position:static!important;}
  body.ultimate-filter-page .ultimate-mobile-rating-slot .oot-rating-card{grid-template-columns:1fr!important;gap:10px!important;padding:14px!important;border-radius:14px!important;}
  body.ultimate-filter-page .ultimate-mobile-rating-slot .oot-stars,
  body.ultimate-filter-page .ultimate-mobile-rating-slot .oot-rating-login{grid-column:1!important;justify-self:start!important;margin:0!important;}
}
@media (min-width:821px){
  body.ultimate-filter-page .ultimate-mobile-rating-slot{display:none!important;}
  body.ultimate-filter-page .canvas-column > #ultimateRatingSlot{display:block!important;}
}