/*======================================================
TEXT FILE MAKER
FREE ONLINE TEXT EDITOR
======================================================*/

:root{

--fotf-primary:#2563eb;
--fotf-primary-dark:#1d4ed8;
--fotf-secondary:#eef5ff;
--fotf-bg:#f7f9fc;
--fotf-card:#ffffff;
--fotf-heading:#0f172a;
--fotf-text:#475569;
--fotf-border:#dbe4ef;
--fotf-success:#16a34a;
--fotf-danger:#dc2626;

--fotf-radius:18px;
--fotf-radius-small:10px;

--fotf-shadow:
0 18px 45px rgba(15,23,42,.08);

}


.fotf-page{

background:#fff;
color:var(--fotf-text);
font-family:Inter,sans-serif;

}


.fotf-container{

width:min(1280px,92%);
margin:auto;

}


/*=================================
Hero
=================================*/

.fotf-hero{

padding:90px 0;
background:

linear-gradient(
135deg,
#eef5ff,
#ffffff
);

text-align:center;

}


.fotf-hero-badge{

display:inline-flex;

padding:10px 18px;

border-radius:999px;

background:#dbeafe;

color:#1d4ed8;

font-weight:700;

font-size:14px;

margin-bottom:22px;

}


.fotf-hero h1{

font-size:56px;

font-weight:800;

color:var(--fotf-heading);

margin-bottom:22px;

line-height:1.1;

}


.fotf-hero p{

max-width:760px;

margin:auto;

font-size:18px;

line-height:1.8;

}


.fotf-hero-button{

display:inline-block;

margin-top:35px;

padding:16px 34px;

background:var(--fotf-primary);

color:#fff;

border-radius:12px;

font-weight:700;

text-decoration:none;

transition:.3s;

}


.fotf-hero-button:hover{

background:var(--fotf-primary-dark);

transform:translateY(-3px);

}


/*=================================
Tool Section
=================================*/

.fotf-tool-section{

padding:90px 0;

background:var(--fotf-bg);

}


.fotf-tool-card{

background:#fff;

border-radius:22px;

padding:35px;

box-shadow:var(--fotf-shadow);

}


/*=================================
Heading
=================================*/

.fotf-tool-heading{

display:flex;

justify-content:space-between;

align-items:flex-start;

gap:30px;

margin-bottom:35px;

}


.fotf-section-label{

display:inline-block;

padding:8px 16px;

border-radius:999px;

background:#dbeafe;

color:#2563eb;

font-size:13px;

font-weight:700;

margin-bottom:14px;

}


.fotf-tool-heading h2{

font-size:34px;

color:var(--fotf-heading);

margin-bottom:12px;

}


.fotf-tool-heading p{

font-size:16px;

line-height:1.8;

}


.fotf-live-status{

display:flex;

align-items:center;

gap:10px;

padding:12px 18px;

border-radius:999px;

background:#ecfdf5;

font-weight:600;

color:#15803d;

white-space:nowrap;

}


.fotf-live-status span{

width:10px;

height:10px;

border-radius:50%;

background:#16a34a;

}


/*=================================
File Bar
=================================*/

.fotf-file-bar{

display:grid;

grid-template-columns:

2fr
1fr
1fr;

gap:20px;

margin-bottom:30px;

}


.fotf-file-bar label{

display:block;

margin-bottom:8px;

font-size:14px;

font-weight:700;

color:var(--fotf-heading);

}


.fotf-file-bar input,

.fotf-file-bar select{

width:100%;

height:52px;

border:1px solid var(--fotf-border);

border-radius:12px;

padding:0 16px;

font-size:15px;

background:#fff;

transition:.3s;

}


.fotf-file-bar input:focus,

.fotf-file-bar select:focus{

outline:none;

border-color:var(--fotf-primary);

box-shadow:

0 0 0 4px

rgba(37,99,235,.10);

}


.fotf-filename-control{

display:flex;

align-items:center;

}


.fotf-filename-control input{

border-radius:

12px 0 0 12px;

border-right:none;

}


.fotf-filename-control span{

height:52px;

display:flex;

align-items:center;

padding:0 20px;

border:

1px solid var(--fotf-border);

border-left:none;

border-radius:

0 12px 12px 0;

background:#f8fafc;

font-weight:700;

}


/*=================================
Toolbar
=================================*/

.fotf-toolbar{

display:flex;

flex-wrap:wrap;

gap:12px;

margin-bottom:30px;

}


.fotf-toolbar button{

display:flex;

align-items:center;

gap:8px;

height:46px;

padding:0 18px;

border:none;

border-radius:10px;

background:#f1f5f9;

font-size:14px;

font-weight:700;

cursor:pointer;

transition:.25s;

}


.fotf-toolbar button:hover{

background:#dbeafe;

color:#2563eb;

transform:translateY(-2px);

}


.fotf-toolbar button span{

font-size:16px;

}


.fotf-primary-action{

background:#2563eb !important;

color:#fff;

}


.fotf-primary-action:hover{

background:#1d4ed8 !important;

color:#fff !important;

}


.fotf-danger-action{

background:#fee2e2 !important;

color:#dc2626;

}


.fotf-danger-action:hover{

background:#fecaca !important;

}


/*=================================
Find Panel
=================================*/

.fotf-find-panel{

display:none;

margin-bottom:30px;

padding:22px;

border-radius:16px;

background:#f8fafc;

border:1px solid var(--fotf-border);

display:grid;

grid-template-columns:

1fr
1fr
auto
auto
auto
auto
auto;

gap:14px;

align-items:center;

}


.fotf-find-panel input{

height:48px;

padding:0 15px;

border:

1px solid var(--fotf-border);

border-radius:10px;

font-size:15px;

}


.fotf-find-panel button{

height:48px;

padding:0 18px;

border:none;

border-radius:10px;

background:#2563eb;

color:#fff;

font-weight:700;

cursor:pointer;

}


.fotf-find-panel button:last-child{

background:#dc2626;

}


/*=================================
Editor Settings
=================================*/

.fotf-editor-settings{

display:flex;

flex-wrap:wrap;

gap:25px;

align-items:center;

margin-bottom:25px;

padding:18px;

background:#f8fafc;

border-radius:16px;

}


.fotf-setting-group{

display:flex;

align-items:center;

gap:12px;

}


.fotf-setting-group label{

font-weight:700;

font-size:14px;

color:var(--fotf-heading);

}


.fotf-size-control{

display:flex;

align-items:center;

}


.fotf-size-control button{

width:40px;

height:40px;

border:none;

background:#2563eb;

color:#fff;

cursor:pointer;

font-size:20px;

}


.fotf-size-control input{

width:70px;

height:40px;

text-align:center;

border:

1px solid var(--fotf-border);

}


.fotf-setting-group select{

height:42px;

padding:0 14px;

border:

1px solid var(--fotf-border);

border-radius:10px;

}


.fotf-check-option{

display:flex;

align-items:center;

gap:8px;

font-size:14px;

font-weight:600;

cursor:pointer;

}
/*=========================================
EDITOR
=========================================*/

.fotf-editor-shell{

display:grid;

grid-template-columns:65px 1fr;

border:1px solid var(--fotf-border);

border-radius:18px;

overflow:hidden;

background:#fff;

margin-bottom:28px;

min-height:620px;

}


.fotf-line-numbers{

background:#f8fafc;

border-right:1px solid var(--fotf-border);

padding:20px 12px;

font-size:15px;

line-height:1.8;

text-align:right;

color:#94a3b8;

user-select:none;

overflow:hidden;

white-space:pre-line;

}


#fotfTextEditor{

width:100%;

min-height:620px;

padding:22px;

border:none;

resize:vertical;

outline:none;

font-size:16px;

line-height:1.8;

font-family:Inter,sans-serif;

background:#fff;

color:#0f172a;

}


#fotfTextEditor::placeholder{

color:#94a3b8;

}


/*=========================================
EDITOR FOOTER
=========================================*/

.fotf-editor-footer{

display:flex;

justify-content:space-between;

align-items:center;

gap:20px;

flex-wrap:wrap;

margin-bottom:35px;

padding:18px 22px;

background:#f8fafc;

border-radius:14px;

}


.fotf-stat-list{

display:flex;

flex-wrap:wrap;

gap:16px;

font-size:14px;

font-weight:600;

color:#475569;

}


.fotf-stat-list span{

display:flex;

align-items:center;

padding:7px 14px;

border-radius:999px;

background:#fff;

border:1px solid var(--fotf-border);

}


.fotf-save-status{

display:flex;

align-items:center;

gap:10px;

font-weight:700;

color:#16a34a;

}


.fotf-save-status span{

width:10px;

height:10px;

border-radius:50%;

background:#16a34a;

}


/*=========================================
DOWNLOAD BOX
=========================================*/

.fotf-download-panel{

display:flex;

justify-content:space-between;

align-items:center;

gap:30px;

padding:35px;

background:

linear-gradient(
135deg,
#2563eb,
#1d4ed8
);

border-radius:22px;

color:#fff;

}


.fotf-download-panel h3{

font-size:28px;

margin-bottom:12px;

color:#fff;

}


.fotf-download-panel p{

color:#dbeafe;

line-height:1.8;

}


.fotf-download-panel button{

height:58px;

padding:0 30px;

border:none;

border-radius:12px;

background:#fff;

color:#2563eb;

font-weight:800;

font-size:15px;

cursor:pointer;

transition:.25s;

white-space:nowrap;

}


.fotf-download-panel button:hover{

transform:translateY(-3px);

}


.fotf-tool-message{

margin-top:15px;

font-size:14px;

color:#fff;

}


/*=========================================
SECTION
=========================================*/

.fotf-section{

padding:90px 0;

}


.fotf-section-heading{

text-align:center;

margin-bottom:55px;

}


.fotf-section-heading h2{

font-size:44px;

color:var(--fotf-heading);

margin:16px 0;

}


.fotf-section-heading p{

max-width:760px;

margin:auto;

line-height:1.8;

}


.fotf-light-heading h2,

.fotf-light-heading p{

color:#fff;

}


.fotf-light-label{

background:#ffffff22;

color:#fff;

}


/*=========================================
FEATURES
=========================================*/

.fotf-feature-grid{

display:grid;

grid-template-columns:

repeat(3,1fr);

gap:28px;

}


.fotf-feature-card{

padding:35px;

background:#fff;

border-radius:18px;

box-shadow:var(--fotf-shadow);

transition:.3s;

}


.fotf-feature-card:hover{

transform:translateY(-6px);

}


.fotf-feature-icon{

width:64px;

height:64px;

display:flex;

align-items:center;

justify-content:center;

border-radius:18px;

background:#dbeafe;

font-size:30px;

margin-bottom:22px;

}


.fotf-feature-card h3{

font-size:22px;

margin-bottom:14px;

color:var(--fotf-heading);

}


.fotf-feature-card p{

line-height:1.8;

}


/*=========================================
HOW
=========================================*/

.fotf-how-section{

padding:90px 0;

background:

linear-gradient(
135deg,
#2563eb,
#1d4ed8
);

}


.fotf-step-grid{

display:grid;

grid-template-columns:

repeat(3,1fr);

gap:30px;

}


.fotf-step-card{

background:#fff;

padding:35px;

border-radius:18px;

}


.fotf-step-number{

display:inline-flex;

width:52px;

height:52px;

border-radius:50%;

background:#2563eb;

color:#fff;

align-items:center;

justify-content:center;

font-weight:800;

margin-bottom:18px;

}


.fotf-step-card h3{

font-size:22px;

margin-bottom:14px;

color:#111827;

}


.fotf-step-card p{

line-height:1.8;

}


/*=========================================
CONTENT
=========================================*/

.fotf-content-section{

padding:90px 0;

background:#f8fafc;

}


.fotf-content-card{

background:#fff;

padding:55px;

border-radius:20px;

box-shadow:var(--fotf-shadow);

}


.fotf-content-card h2{

font-size:34px;

margin:40px 0 18px;

color:#111827;

}


.fotf-content-card p{

line-height:1.9;

margin-bottom:18px;

}


.fotf-use-grid{

display:grid;

grid-template-columns:

repeat(2,1fr);

gap:16px;

margin:35px 0;

}


.fotf-use-item{

display:flex;

gap:12px;

align-items:flex-start;

padding:16px;

border-radius:12px;

background:#f8fafc;

}


.fotf-use-item span{

color:#16a34a;

font-weight:800;

}


.fotf-information-note{

display:flex;

gap:18px;

padding:25px;

border-radius:16px;

background:#eef5ff;

margin-top:35px;

}


.fotf-information-note div{

width:48px;

height:48px;

border-radius:50%;

background:#2563eb;

color:#fff;

display:flex;

align-items:center;

justify-content:center;

font-weight:800;

flex-shrink:0;

}
/*=========================================
RELATED TOOLS
=========================================*/

.fotf-related-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:22px;
}

.fotf-related-card{
  display:block;
  padding:30px 24px;
  text-align:center;
  text-decoration:none !important;
  color:#111827;
  background:#ffffff;
  border:1px solid var(--fotf-border);
  border-top:5px solid var(--fotf-primary);
  border-radius:16px;
  box-shadow:0 10px 28px rgba(15,23,42,.07);
  transition:
    transform .25s ease,
    box-shadow .25s ease;
}

.fotf-related-card:hover{
  transform:translateY(-6px);
  box-shadow:0 18px 38px rgba(15,23,42,.12);
}

.fotf-related-card > span{
  width:56px;
  height:56px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 18px;
  color:#ffffff;
  background:linear-gradient(
    135deg,
    var(--fotf-primary),
    var(--fotf-primary-dark)
  );
  border-radius:16px;
  font-size:24px;
  font-weight:800;
}

.fotf-related-card strong{
  display:block;
  margin-bottom:10px;
  color:#111827;
  font-size:18px;
  font-weight:800;
}

.fotf-related-card p{
  margin:0;
  color:#64748b;
  font-size:14px;
  line-height:1.7;
}


/*=========================================
FAQ
=========================================*/

.fotf-faq-section{
  padding:90px 0;
  background:#f8fafc;
}

.fotf-faq-list{
  max-width:900px;
  margin:0 auto;
}

.fotf-faq-item{
  margin-bottom:15px;
  overflow:hidden;
  background:#ffffff;
  border:1px solid var(--fotf-border);
  border-radius:15px;
  box-shadow:0 8px 24px rgba(15,23,42,.06);
}

.fotf-faq-item > button{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:21px 24px;
  color:#111827;
  background:#ffffff;
  border:0;
  cursor:pointer;
  text-align:left;
  font-size:16px;
  font-weight:800;
}

.fotf-faq-item > button span{
  flex:0 0 34px;
  width:34px;
  height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#ffffff;
  background:linear-gradient(
    135deg,
    var(--fotf-primary),
    var(--fotf-primary-dark)
  );
  border-radius:50%;
  font-size:21px;
  transition:transform .25s ease;
}

.fotf-faq-answer{
  display:none;
  padding:0 24px 22px;
}

.fotf-faq-answer p{
  margin:0;
  color:#64748b;
  line-height:1.8;
}

.fotf-faq-item.active .fotf-faq-answer{
  display:block;
}

.fotf-faq-item.active > button span{
  transform:rotate(45deg);
}


/*=========================================
CTA
=========================================*/

.fotf-cta{
  max-width:1280px;
  margin:0 auto 50px;
  padding:82px 20px;
  text-align:center;
  color:#ffffff;
  background:
    radial-gradient(
      circle at top left,
      rgba(255,255,255,.15),
      transparent 28%
    ),
    linear-gradient(
      135deg,
      var(--fotf-primary),
      var(--fotf-primary-dark)
    );
}

.fotf-cta h2{
  margin:0 0 18px;
  color:#ffffff;
  font-size:42px;
  line-height:1.2;
  font-weight:800;
}

.fotf-cta p{
  max-width:720px;
  margin:0 auto 30px;
  color:#dbeafe;
  font-size:17px;
  line-height:1.8;
}

.fotf-cta a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:52px;
  padding:14px 30px;
  color:var(--fotf-primary);
  background:#ffffff;
  border-radius:999px;
  text-decoration:none !important;
  font-weight:800;
  box-shadow:0 12px 30px rgba(15,23,42,.16);
  transition:
    transform .25s ease,
    box-shadow .25s ease;
}

.fotf-cta a:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 36px rgba(15,23,42,.22);
}


/*=========================================
DARK MODE
=========================================*/

.fotf-page.fotf-dark-mode{
  background:#0f172a;
  color:#e5e7eb;
}

.fotf-dark-mode .fotf-tool-section,
.fotf-dark-mode .fotf-content-section,
.fotf-dark-mode .fotf-faq-section{
  background:#0f172a;
}

.fotf-dark-mode .fotf-tool-card,
.fotf-dark-mode .fotf-feature-card,
.fotf-dark-mode .fotf-content-card,
.fotf-dark-mode .fotf-related-card,
.fotf-dark-mode .fotf-faq-item,
.fotf-dark-mode .fotf-faq-item > button{
  color:#f8fafc;
  background:#1e293b;
  border-color:#334155;
}

.fotf-dark-mode .fotf-tool-heading h2,
.fotf-dark-mode .fotf-section-heading h2,
.fotf-dark-mode .fotf-feature-card h3,
.fotf-dark-mode .fotf-content-card h2,
.fotf-dark-mode .fotf-related-card strong,
.fotf-dark-mode .fotf-file-bar label,
.fotf-dark-mode .fotf-setting-group label{
  color:#f8fafc;
}

.fotf-dark-mode .fotf-tool-heading p,
.fotf-dark-mode .fotf-section-heading p,
.fotf-dark-mode .fotf-feature-card p,
.fotf-dark-mode .fotf-content-card p,
.fotf-dark-mode .fotf-related-card p,
.fotf-dark-mode .fotf-faq-answer p{
  color:#cbd5e1;
}

.fotf-dark-mode .fotf-file-bar input,
.fotf-dark-mode .fotf-file-bar select,
.fotf-dark-mode .fotf-find-panel,
.fotf-dark-mode .fotf-find-panel input,
.fotf-dark-mode .fotf-editor-settings,
.fotf-dark-mode .fotf-setting-group select,
.fotf-dark-mode .fotf-size-control input,
.fotf-dark-mode .fotf-editor-shell,
.fotf-dark-mode #fotfTextEditor,
.fotf-dark-mode .fotf-line-numbers,
.fotf-dark-mode .fotf-editor-footer,
.fotf-dark-mode .fotf-stat-list span{
  color:#f8fafc;
  background:#111827;
  border-color:#334155;
}

.fotf-dark-mode .fotf-filename-control span{
  color:#f8fafc;
  background:#1e293b;
  border-color:#334155;
}

.fotf-dark-mode .fotf-use-item{
  color:#e5e7eb;
  background:#111827;
}

.fotf-dark-mode .fotf-information-note{
  color:#dbeafe;
  background:#172554;
}


/*=========================================
FULLSCREEN
=========================================*/

.fotf-editor-shell:fullscreen{
  width:100%;
  min-height:100vh;
  border:0;
  border-radius:0;
  background:#ffffff;
}

.fotf-editor-shell:fullscreen #fotfTextEditor{
  min-height:100vh;
  resize:none;
}

.fotf-dark-mode .fotf-editor-shell:fullscreen{
  background:#111827;
}


/*=========================================
SCROLLBAR
=========================================*/

#fotfTextEditor{
  scrollbar-width:thin;
  scrollbar-color:#93c5fd #f1f5f9;
}

#fotfTextEditor::-webkit-scrollbar{
  width:10px;
}

#fotfTextEditor::-webkit-scrollbar-track{
  background:#f1f5f9;
}

#fotfTextEditor::-webkit-scrollbar-thumb{
  background:#93c5fd;
  border:2px solid #f1f5f9;
  border-radius:999px;
}

#fotfTextEditor::-webkit-scrollbar-thumb:hover{
  background:#60a5fa;
}


/*=========================================
TABLET
=========================================*/

@media(max-width:1050px){

  .fotf-file-bar{
    grid-template-columns:1fr 1fr;
  }

  .fotf-filename-group{
    grid-column:1 / -1;
  }

  .fotf-find-panel{
    grid-template-columns:1fr 1fr;
  }

  .fotf-find-panel .fotf-check-option{
    grid-column:1 / -1;
  }

  .fotf-feature-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .fotf-step-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .fotf-related-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

}


/*=========================================
MOBILE
=========================================*/

@media(max-width:700px){

  .fotf-container{
    width:min(100%,94%);
  }

  .fotf-hero{
    padding:62px 0;
  }

  .fotf-hero h1{
    font-size:38px;
  }

  .fotf-hero p{
    font-size:16px;
  }

  .fotf-tool-section,
  .fotf-section,
  .fotf-content-section,
  .fotf-faq-section,
  .fotf-how-section{
    padding:58px 0;
  }

  .fotf-tool-card{
    padding:24px 16px;
    border-radius:16px;
  }

  .fotf-tool-heading{
    flex-direction:column;
  }

  .fotf-tool-heading h2{
    font-size:28px;
  }

  .fotf-live-status{
    align-self:flex-start;
  }

  .fotf-file-bar{
    grid-template-columns:1fr;
  }

  .fotf-filename-group{
    grid-column:auto;
  }

  .fotf-toolbar{
    flex-wrap:nowrap;
    overflow-x:auto;
    padding-bottom:10px;
  }

  .fotf-toolbar button{
    flex:0 0 auto;
  }

  .fotf-find-panel{
    grid-template-columns:1fr;
  }

  .fotf-find-panel .fotf-check-option{
    grid-column:auto;
  }

  .fotf-editor-settings{
    align-items:flex-start;
    flex-direction:column;
    gap:16px;
  }

  .fotf-setting-group{
    width:100%;
    justify-content:space-between;
  }

  .fotf-editor-shell{
    grid-template-columns:48px 1fr;
    min-height:500px;
  }

  .fotf-line-numbers{
    padding:18px 8px;
    font-size:13px;
  }

  #fotfTextEditor{
    min-height:500px;
    padding:18px 14px;
  }

  .fotf-editor-footer{
    align-items:flex-start;
    flex-direction:column;
  }

  .fotf-download-panel{
    align-items:flex-start;
    flex-direction:column;
    padding:28px 22px;
  }

  .fotf-download-panel h3{
    font-size:24px;
  }

  .fotf-download-panel button{
    width:100%;
  }

  .fotf-section-heading h2{
    font-size:30px;
  }

  .fotf-feature-grid,
  .fotf-step-grid,
  .fotf-use-grid,
  .fotf-related-grid{
    grid-template-columns:1fr;
  }

  .fotf-content-card{
    padding:30px 22px;
  }

  .fotf-content-card h2{
    font-size:27px;
  }

  .fotf-faq-item > button{
    padding:18px;
    font-size:15px;
  }

  .fotf-faq-answer{
    padding:0 18px 18px;
  }

  .fotf-cta{
    margin-bottom:35px;
    padding:62px 15px;
  }

  .fotf-cta h2{
    font-size:30px;
  }

}


/*=========================================
SMALL MOBILE
=========================================*/

@media(max-width:420px){

  .fotf-hero h1{
    font-size:33px;
  }

  .fotf-editor-shell{
    grid-template-columns:42px 1fr;
  }

  .fotf-line-numbers{
    font-size:12px;
  }

  .fotf-size-control input{
    width:56px;
  }

  .fotf-setting-group{
    align-items:flex-start;
    flex-direction:column;
  }

  .fotf-filename-control span{
    padding:0 14px;
  }

}