/* YouTube Copyright Checker — clone stylesheet
   Palette + tokens extracted from the real site's /assets/index-LkKse2CN.css */
:root{
  /* ธีมสว่าง ฟ้า-แดง: น้ำเงิน = สีหลัก, แดง = เน้น/เตือน */
  --background:210 40% 98%;
  --foreground:215 35% 15%;
  --card:0 0% 100%;
  --card-foreground:215 35% 15%;
  --popover:0 0% 100%;
  --popover-foreground:215 35% 15%;
  --primary:214 90% 52%;
  --primary-foreground:0 0% 100%;
  --secondary:0 85% 55%;
  --secondary-foreground:0 0% 100%;
  --muted:210 40% 95%;
  --muted-foreground:215 20% 45%;
  --accent:0 88% 58%;
  --accent-foreground:0 0% 100%;
  --destructive:0 84% 60%;
  --destructive-foreground:0 0% 100%;
  --success:142 71% 45%;
  --warning:38 92% 50%;
  --border:210 30% 88%;
  --input:210 30% 88%;
  --ring:214 90% 55%;
  --radius:.75rem;
  --gradient-primary:linear-gradient(135deg,hsl(214 90% 52%) 0%,hsl(0 85% 58%) 100%);
  --gradient-hero:linear-gradient(180deg,hsl(210 60% 98%) 0%,hsl(210 45% 94%) 55%,hsl(0 40% 97%) 100%);
  --gradient-card:linear-gradient(135deg,rgba(59,130,246,.08) 0%,rgba(239,68,68,.06) 100%);
  --shadow-soft:0 4px 24px -2px hsl(214 90% 50% / .18);
  --shadow-glow:0 0 40px hsl(214 90% 50% / .28);
  --transition-smooth:all .3s cubic-bezier(.4,0,.2,1);
}
.dark{
  --background:215 35% 9%;
  --foreground:210 30% 95%;
  --card:215 32% 14%;
  --card-foreground:210 30% 95%;
  --popover:215 32% 14%;
  --popover-foreground:210 30% 95%;
  --muted:215 25% 20%;
  --muted-foreground:210 15% 65%;
  --border:215 25% 24%;
  --input:215 25% 24%;
  --gradient-hero:linear-gradient(180deg,hsl(215 40% 10%) 0%,hsl(215 35% 14%) 55%,hsl(0 25% 13%) 100%);
  --gradient-card:linear-gradient(135deg,rgba(96,165,250,.10) 0%,rgba(248,113,113,.07) 100%);
  --shadow-glow:0 0 40px hsl(214 90% 55% / .38);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  background:hsl(var(--background));
  color:hsl(var(--foreground));
  transition:var(--transition-smooth);
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button,input,textarea{font:inherit;color:inherit}

/* ---------- layout ---------- */
.container{width:100%;max-width:1200px;margin:0 auto;padding:0 1rem}
.nav{
  position:sticky;top:0;z-index:50;
  background:hsl(var(--card) / .9);
  backdrop-filter:blur(8px);
  border-bottom:1px solid hsl(var(--border));
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:64px;gap:1rem}
.brand{display:flex;align-items:center;gap:.6rem;font-weight:700;font-size:1.05rem;letter-spacing:-.01em}
.brand img{width:32px;height:32px;border-radius:8px}
.nav-links{display:flex;align-items:center;gap:1.25rem;font-size:.9rem;color:hsl(var(--muted-foreground))}
.nav-links a:hover{color:hsl(var(--foreground))}
.nav-actions{display:flex;align-items:center;gap:.5rem}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  border-radius:var(--radius);border:1px solid transparent;
  padding:.6rem 1.1rem;font-size:.9rem;font-weight:600;cursor:pointer;
  transition:var(--transition-smooth);white-space:nowrap;
}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn-primary{background:var(--gradient-primary);color:hsl(var(--primary-foreground));box-shadow:var(--shadow-soft)}
.btn-primary:hover:not(:disabled){filter:brightness(1.08);box-shadow:var(--shadow-glow)}
.btn-outline{background:transparent;border-color:hsl(var(--border));color:hsl(var(--foreground))}
.btn-outline:hover{background:hsl(var(--muted))}
.btn-ghost{background:transparent;color:hsl(var(--muted-foreground))}
.btn-ghost:hover{background:hsl(var(--muted));color:hsl(var(--foreground))}
.btn-sm{padding:.4rem .75rem;font-size:.82rem}
.btn-lg{padding:.85rem 1.6rem;font-size:1rem}
.btn-block{width:100%}
.icon-btn{width:36px;height:36px;padding:0;border-radius:50%}

/* ---------- hero ---------- */
.hero{background:var(--gradient-hero);padding:4.5rem 0 3.5rem;text-align:center}
.hero h1{font-size:clamp(2rem,5vw,3.25rem);line-height:1.1;margin:0 0 1rem;font-weight:800;letter-spacing:-.02em}
.hero h1 .grad{background:var(--gradient-primary);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p.lead{font-size:1.1rem;color:hsl(var(--muted-foreground));max-width:640px;margin:0 auto 2rem}
.hero-cta{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap;margin-bottom:3rem}
.stats{display:flex;justify-content:center;gap:3rem;flex-wrap:wrap}
.stat b{display:block;font-size:2rem;font-weight:800;letter-spacing:-.02em}
.stat span{font-size:.85rem;color:hsl(var(--muted-foreground))}

/* ---------- cards ---------- */
section{padding:3.5rem 0}
.section-head{text-align:center;margin-bottom:2.25rem}
.section-head h2{font-size:1.9rem;margin:0 0 .5rem;font-weight:800;letter-spacing:-.02em}
.section-head p{color:hsl(var(--muted-foreground));margin:0}
.card{
  background:hsl(var(--card));border:1px solid hsl(var(--border));
  border-radius:var(--radius);padding:1.5rem;
  box-shadow:0 1px 2px hsl(0 0% 0% / .04);transition:var(--transition-smooth);
}
.card-hover:hover{box-shadow:var(--shadow-soft);transform:translateY(-2px);border-color:hsl(var(--primary) / .35)}
.grid{display:grid;gap:1.25rem}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}

/* check panels */
.check-panel .card-head{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem}
.check-panel .card-head h3{margin:0;font-size:1.05rem;font-weight:700}
.icon-badge{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:hsl(var(--primary) / .1);color:hsl(var(--primary))}
.icon-badge svg{width:20px;height:20px}
.card p.desc{color:hsl(var(--muted-foreground));font-size:.9rem;margin:0 0 1rem}
.input-row{display:flex;gap:.5rem}
input[type=text],input[type=url],input[type=email],input[type=password],input[type=number],textarea,select{
  width:100%;background:hsl(var(--background));border:1px solid hsl(var(--input));
  border-radius:var(--radius);padding:.65rem .85rem;font-size:.92rem;outline:none;
  transition:var(--transition-smooth);
}
input:focus,textarea:focus,select:focus{border-color:hsl(var(--ring));box-shadow:0 0 0 3px hsl(var(--ring) / .15)}
textarea{resize:vertical;min-height:90px}

/* dropdown: ตัวอักษรสีขาวบนพื้นสีหลัก เพื่อให้อ่านชัดทั้งธีมสว่างและมืด
   ใช้สีน้ำเงินเข้มกว่าธีมปกติเล็กน้อย เพื่อให้ตัวอักษรขาวผ่านเกณฑ์
   ความต่างของสี WCAG AA (>=4.5:1) — วัดได้จริง 6.04:1 */
select{
  background:hsl(214 85% 42%);
  color:#fff;
  font-weight:600;
  cursor:pointer;
  border:1px solid hsl(var(--primary));
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  /* ลูกศรสีขาว (วาดด้วย SVG แทนลูกศรของระบบที่เป็นสีดำ) */
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23ffffff' d='M1.41 0L6 4.59L10.59 0L12 1.41L6 7.41L0 1.41z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right .85rem center;
  padding-right:2.2rem;
}
select:hover{filter:brightness(1.08)}
select:focus{border-color:hsl(var(--ring));box-shadow:0 0 0 3px hsl(var(--ring) / .25)}
/* ตัวเลือกในรายการที่เปิดลงมา — พื้นหลังเข้มให้ตัวอักษรขาวอ่านได้
   (เบราว์เซอร์ส่วนใหญ่ไม่อนุญาตให้จัดสี option บน Windows มากนัก
    แต่การกำหนดไว้จะมีผลบน Chrome/Edge และ Firefox) */
select option{
  background:hsl(215 35% 15%);
  color:#fff;
}
/* สถานะที่ยังไม่ได้เลือก (placeholder) ให้อ่อนลงเล็กน้อย */
select:invalid,select option[value=""]{color:hsl(0 0% 100% / .8)}

/* dropzone */
.dropzone{
  border:2px dashed hsl(var(--border));border-radius:var(--radius);
  padding:2.25rem 1rem;text-align:center;cursor:pointer;transition:var(--transition-smooth);
  background:hsl(var(--background));
}
.dropzone:hover,.dropzone.over{border-color:hsl(var(--primary));background:hsl(var(--primary) / .05)}
.dropzone svg{width:36px;height:36px;color:hsl(var(--primary));margin:0 auto .6rem}
.dropzone .dz-title{font-weight:600;margin-bottom:.2rem}
.dropzone .dz-sub{font-size:.82rem;color:hsl(var(--muted-foreground))}
.file-chip{
  display:flex;align-items:center;gap:.6rem;margin-top:.75rem;padding:.6rem .8rem;
  background:hsl(var(--muted));border-radius:.6rem;font-size:.86rem;
}
.file-chip .name{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file-chip .size{color:hsl(var(--muted-foreground));font-size:.8rem;margin-left:auto}

/* how it works */
.step{position:relative;text-align:left}
.step .num{
  width:38px;height:38px;border-radius:50%;background:var(--gradient-primary);
  color:#fff;display:grid;place-items:center;font-weight:800;margin-bottom:.85rem;
  box-shadow:var(--shadow-soft);
}
.step h3{margin:0 0 .35rem;font-size:1.02rem}
.step p{margin:0;color:hsl(var(--muted-foreground));font-size:.9rem}

/* ---------- result / report ---------- */
.verdict{
  border-radius:var(--radius);padding:1.5rem;color:#fff;margin-bottom:1.5rem;
  display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
}
.verdict.safe{background:linear-gradient(135deg,hsl(142 71% 40%),hsl(142 65% 34%))}
.verdict.risk{background:linear-gradient(135deg,hsl(38 92% 50%),hsl(25 95% 45%))}
.verdict.danger{background:linear-gradient(135deg,hsl(0 84% 55%),hsl(0 80% 42%))}
.verdict .v-icon{width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.2);display:grid;place-items:center}
.verdict .v-icon svg{width:26px;height:26px}
.verdict h3{margin:0;font-size:1.35rem;font-weight:800}
.verdict p{margin:.15rem 0 0;opacity:.92;font-size:.92rem}
.verdict .score{margin-left:auto;text-align:right}
.verdict .score b{font-size:2rem;font-weight:800;display:block;line-height:1}
.verdict .score span{font-size:.78rem;opacity:.9}

.meter{height:8px;border-radius:99px;background:hsl(var(--muted));overflow:hidden}
.meter > i{display:block;height:100%;border-radius:99px;transition:width .8s cubic-bezier(.4,0,.2,1)}
.meter > i.safe{background:hsl(142 71% 45%)}
.meter > i.risk{background:hsl(38 92% 50%)}
.meter > i.danger{background:hsl(0 84% 60%)}

.seg{display:flex;align-items:center;gap:.65rem;padding:.55rem 0;border-bottom:1px solid hsl(var(--border))}
.seg:last-child{border-bottom:0}
.seg .t{font-variant-numeric:tabular-nums;font-size:.82rem;color:hsl(var(--muted-foreground));min-width:92px}
.seg .bar{flex:1;height:6px;border-radius:99px;background:hsl(var(--muted));overflow:hidden}
.seg .bar > i{display:block;height:100%;background:var(--gradient-primary)}
.seg .lbl{font-size:.8rem;color:hsl(var(--muted-foreground));min-width:74px;text-align:right}

.finding{
  display:flex;gap:.85rem;padding:1rem;border:1px solid hsl(var(--border));
  border-radius:var(--radius);margin-bottom:.75rem;background:hsl(var(--card));
}
.finding .fbadge{
  flex:0 0 auto;width:34px;height:34px;border-radius:9px;display:grid;place-items:center;font-weight:800;font-size:.8rem;color:#fff;
}
.finding .fbadge.high{background:hsl(0 84% 60%)}
.finding .fbadge.medium{background:hsl(38 92% 50%)}
.finding .fbadge.low{background:hsl(220 10% 60%)}
.finding .fbadge.info{background:hsl(var(--primary))}
.finding h4{margin:0 0 .2rem;font-size:.95rem}
.finding p{margin:0;font-size:.87rem;color:hsl(var(--muted-foreground))}
.finding .meta{margin-top:.4rem;font-size:.78rem;color:hsl(var(--muted-foreground));display:flex;gap:.9rem;flex-wrap:wrap}

.badge{display:inline-block;padding:.18rem .55rem;border-radius:99px;font-size:.74rem;font-weight:700}
.badge.safe{background:hsl(142 71% 45% / .15);color:hsl(142 71% 35%)}
.badge.risk{background:hsl(38 92% 50% / .18);color:hsl(25 95% 40%)}
.badge.danger{background:hsl(0 84% 60% / .15);color:hsl(0 84% 50%)}
.badge.muted{background:hsl(var(--muted));color:hsl(var(--muted-foreground))}

table.tbl{width:100%;border-collapse:collapse;font-size:.88rem}
table.tbl th,table.tbl td{padding:.6rem .7rem;text-align:left;border-bottom:1px solid hsl(var(--border))}
table.tbl th{font-size:.76rem;text-transform:uppercase;letter-spacing:.05em;color:hsl(var(--muted-foreground))}
table.tbl tbody tr:hover{background:hsl(var(--muted))}
.table-wrap{overflow-x:auto}

/* ---------- progress ---------- */
.progress-card{text-align:center;padding:3rem 1.5rem}
.spinner{
  width:52px;height:52px;border-radius:50%;margin:0 auto 1.25rem;
  border:4px solid hsl(var(--primary) / .18);border-top-color:hsl(var(--primary));
  animation:spin .9s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.logbox{
  margin-top:1.25rem;text-align:left;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.8rem;background:hsl(var(--muted));border-radius:var(--radius);
  padding:.9rem 1rem;max-height:230px;overflow:auto;color:hsl(var(--muted-foreground));
}
.logbox div{padding:.1rem 0}
.logbox b{color:hsl(var(--foreground))}

/* ---------- misc ---------- */
.footer{border-top:1px solid hsl(var(--border));padding:2.25rem 0;margin-top:2rem}
.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
.footer-links{display:flex;gap:1.1rem;font-size:.87rem;color:hsl(var(--muted-foreground))}
.footer-links a:hover{color:hsl(var(--primary))}
.muted{color:hsl(var(--muted-foreground))}
.small{font-size:.85rem}
.center{text-align:center}
.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.5rem}.mb-1{margin-bottom:.5rem}.mb-2{margin-bottom:1rem}
.row{display:flex;gap:.75rem;align-items:center;flex-wrap:wrap}
.row-between{display:flex;justify-content:space-between;align-items:center;gap:.75rem;flex-wrap:wrap}
.kv{display:flex;justify-content:space-between;gap:1rem;padding:.4rem 0;border-bottom:1px solid hsl(var(--border));font-size:.88rem}
.kv:last-child{border-bottom:0}
.kv span{color:hsl(var(--muted-foreground))}
.kv b{font-weight:600}
.alert{padding:.85rem 1rem;border-radius:var(--radius);font-size:.88rem;margin-bottom:1rem;border:1px solid}
.alert.err{background:hsl(0 84% 60% / .1);border-color:hsl(0 84% 60% / .35);color:hsl(0 84% 45%)}
.alert.ok{background:hsl(142 71% 45% / .1);border-color:hsl(142 71% 45% / .3);color:hsl(142 71% 35%)}
.alert.warn{background:hsl(38 92% 50% / .12);border-color:hsl(38 92% 50% / .35);color:hsl(25 95% 40%)}
.alert.danger{background:hsl(0 84% 60% / .1);border-color:hsl(0 84% 60% / .35);color:hsl(0 84% 45%)}
.faq-item{border:1px solid hsl(var(--border));border-radius:var(--radius);margin-bottom:.65rem;overflow:hidden}
.faq-item summary{padding:.9rem 1.1rem;cursor:pointer;font-weight:600;font-size:.95rem;list-style:none}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:'+';float:right;color:hsl(var(--primary));font-weight:700}
.faq-item[open] summary::after{content:'\2013'}
.faq-item .faq-body{padding:0 1.1rem 1rem;color:hsl(var(--muted-foreground));font-size:.9rem}
.prose{max-width:820px;margin:0 auto}
.prose h2{font-size:1.45rem;margin:2rem 0 .6rem}
.prose h3{font-size:1.12rem;margin:1.4rem 0 .4rem}
.prose p,.prose li{color:hsl(var(--muted-foreground));line-height:1.75}
.prose ul{padding-left:1.2rem}
.nav-toggle{display:none}
@media(max-width:760px){
  .nav-links{display:none}
  .nav-links.open{display:flex;flex-direction:column;position:absolute;top:64px;left:0;right:0;
    background:hsl(var(--card));border-bottom:1px solid hsl(var(--border));padding:1rem;align-items:stretch}
  .nav-toggle{display:inline-flex}
  .stats{gap:1.75rem}
  .hero{padding:3rem 0 2.5rem}
}