body, html{margin:0;padding:0;font-family:Arial,sans-serif;}
body{
  --app-bg:#f6f8fb;
  --app-text:#0f172a;
  --panel-bg:#ffffff;
  --panel-border:#e2e8f0;
  --sidebar-bg:#ffffff;
  --main-bg:#ffffff;
  --title-color:#0f172a;
  --snippet-bg:#f8fafc;
  --snippet-text:#0f172a;
  --ui-radius-sm:10px;
  --ui-radius-md:14px;
  --ui-shadow-sm:0 1px 4px rgba(15,23,42,0.06);
  --ui-shadow-md:0 8px 20px rgba(15,23,42,0.08);
  --ui-input-bg:#ffffff;
  --ui-input-border:#cbd5e1;
  --ui-btn-bg:#2563eb;
  --ui-btn-bg-hover:#1d4ed8;
  --ui-btn-text:#ffffff;
  --ui-card-bg:#ffffff;
  --ui-card-border:#e2e8f0;
  --ui-tag-bg:#eef2ff;
  --ui-tag-text:#1e3a8a;
  --motion-fast:140ms;
  --motion-base:220ms;
  --motion-slow:320ms;
  --ease-standard:cubic-bezier(.2,.8,.2,1);
  background:var(--app-bg);
  color:var(--app-text);
}
body.theme-dark{
  --app-bg:#0b111b;
  --app-text:#e5e7eb;
  --panel-bg:#111827;
  --panel-border:#1f2937;
  --sidebar-bg:#111827;
  --main-bg:#0f172a;
  --title-color:#dbeafe;
  --snippet-bg:#0b1220;
  --snippet-text:#cbd5e1;
  --ui-input-bg:#0f172a;
  --ui-input-border:#334155;
  --ui-btn-bg:#3b82f6;
  --ui-btn-bg-hover:#2563eb;
  --ui-btn-text:#f8fafc;
  --ui-card-bg:#111827;
  --ui-card-border:#374151;
  --ui-tag-bg:#1e293b;
  --ui-tag-text:#bfdbfe;
}
.tool-container{max-width:1100px;margin:16px auto;padding:14px;border-radius:16px;box-shadow:var(--ui-shadow-md);background:var(--panel-bg);border:1px solid var(--panel-border);animation:fadeSlideIn var(--motion-slow) var(--ease-standard);}
.tool-layout{
  display:grid;
  grid-template-columns:280px minmax(0, 1fr);
  grid-template-areas:"sidebar main";
  gap:18px;
  align-items:start;
}
.tool-sidebar{position:sticky;top:16px;background:var(--sidebar-bg);border:1px solid var(--panel-border);border-radius:14px;padding:12px;transition:border-color var(--motion-base) var(--ease-standard), box-shadow var(--motion-base) var(--ease-standard);}
.sidebar-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:8px;
}
.sidebar-title{margin:0 0 10px 0;font-size:15px;font-weight:700;color:var(--title-color);letter-spacing:.2px;}
.sidebar-header .sidebar-title{margin:0;}
.sidebar-header .btn{font-size:11px;padding:7px 9px;}
.sidebar-nav{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-bottom:10px;
}
.sidebar-nav-link{
  display:flex;
  align-items:center;
  gap:8px;
  text-decoration:none;
  color:var(--app-text);
  font-size:12px;
  padding:8px 10px;
  border-radius:10px;
  border:1px solid transparent;
  background:transparent;
  transition:background-color var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard), transform var(--motion-fast) var(--ease-standard);
}
.sidebar-nav-link:hover{
  background:rgba(148,163,184,0.12);
  border-color:var(--panel-border);
  transform:translateX(2px);
}
.sidebar-nav-link.is-active{
  background:rgba(59,130,246,0.14);
  border-color:rgba(59,130,246,0.35);
  color:#1d4ed8;
  font-weight:600;
}
body.theme-dark .sidebar-nav-link.is-active{
  background:rgba(59,130,246,0.2);
  border-color:rgba(96,165,250,0.45);
  color:#bfdbfe;
}
.tool-main{background:var(--main-bg);border:1px solid var(--panel-border);border-radius:14px;padding:12px;min-height:220px;transition:border-color var(--motion-base) var(--ease-standard), transform var(--motion-base) var(--ease-standard);}
body.focus-mode .tool-layout{
  grid-template-columns:220px minmax(0, 1fr);
}
body.focus-mode .sidebar-nav,
body.focus-mode .history-panel{
  display:none;
}
body.focus-mode .tool-main{
  min-height:320px;
  box-shadow:var(--ui-shadow-sm);
}
body.focus-mode #focusModeToggle{
  background:#1d4ed8;
  color:#eff6ff;
}
body.theme-dark.focus-mode #focusModeToggle{
  background:#3b82f6;
  color:#0b1220;
}
.tool-sidebar{grid-area:sidebar;}
.tool-main{grid-area:main;}
.top-controls{display:grid;grid-template-columns:1fr;gap:8px;margin-bottom:0;}
.history-panel{
  margin-top:14px;
  border:1px solid var(--panel-border);
  border-radius:var(--ui-radius-md);
  background:var(--main-bg);
  padding:10px;
}
.history-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:8px;
}
.history-header h4{
  margin:0;
  font-size:13px;
  letter-spacing:.2px;
  color:var(--title-color);
}
.history-list{
  max-height:260px;
  overflow:auto;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.history-group{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.history-group-title{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.4px;
  color:#64748b;
}
.history-item{
  display:grid;
  grid-template-columns:20px 1fr auto auto;
  gap:8px;
  align-items:center;
  border:1px solid var(--ui-card-border);
  border-radius:10px;
  background:var(--ui-card-bg);
  padding:8px;
  animation:fadeSlideIn var(--motion-base) var(--ease-standard);
  transition:transform var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard);
  width:100%;
  text-align:left;
  appearance:none;
  -webkit-appearance:none;
  margin:0;
  background:var(--ui-card-bg);
  color:inherit;
}
.history-item:hover{
  transform:translateY(-1px);
  box-shadow:var(--ui-shadow-sm);
  border-color:#93c5fd;
}
.history-item.is-clickable{cursor:pointer;}
.history-icon{
  width:18px;
  text-align:center;
  opacity:.9;
  transition:transform var(--motion-fast) var(--ease-standard);
}
.history-item:hover .history-icon{transform:scale(1.08);}
.history-text{
  font-size:12px;
  color:var(--app-text);
}
.history-time{
  font-size:11px;
  color:#94a3b8;
}
.history-empty{
  font-size:12px;
  color:#94a3b8;
  padding:6px 2px;
}
.history-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:56px;
  padding:2px 8px;
  border-radius:999px;
  font-size:10px;
  font-weight:700;
  letter-spacing:.25px;
  border:1px solid transparent;
}
.badge-create{background:#ecfdf3;color:#166534;border-color:#bbf7d0;}
.badge-modify{background:#eef2ff;color:#3730a3;border-color:#c7d2fe;}
.badge-history{background:#f5f3ff;color:#6d28d9;border-color:#ddd6fe;}
.badge-export{background:#ecfeff;color:#0f766e;border-color:#99f6e4;}
.badge-theme{background:#fffbeb;color:#92400e;border-color:#fde68a;}
body.theme-dark .badge-create{background:rgba(34,197,94,.18);color:#bbf7d0;border-color:rgba(134,239,172,.45);}
body.theme-dark .badge-modify{background:rgba(99,102,241,.2);color:#c7d2fe;border-color:rgba(165,180,252,.45);}
body.theme-dark .badge-history{background:rgba(168,85,247,.2);color:#e9d5ff;border-color:rgba(216,180,254,.45);}
body.theme-dark .badge-export{background:rgba(20,184,166,.18);color:#99f6e4;border-color:rgba(94,234,212,.45);}
body.theme-dark .badge-theme{background:rgba(245,158,11,.2);color:#fde68a;border-color:rgba(252,211,77,.45);}
.ui-input,
.top-controls input[type=text], .top-controls input[type=color], .top-controls input[type=file]{
  padding:10px 12px;
  border-radius:var(--ui-radius-sm);
  border:1px solid var(--ui-input-border);
  background:var(--ui-input-bg);
  color:var(--app-text);
  outline:none;
  transition:border-color .2s, box-shadow .2s;
}
.ui-input:focus,
.top-controls input[type=text]:focus, .top-controls input[type=color]:focus, .top-controls input[type=file]:focus{
  border-color:#93c5fd;
  box-shadow:0 0 0 3px rgba(147,197,253,0.22);
  transform:translateY(-1px);
}
.ui-btn,
.top-controls .btn{
  padding:10px 12px;
  border:none;
  border-radius:var(--ui-radius-sm);
  background:var(--ui-btn-bg);
  color:var(--ui-btn-text);
  cursor:pointer;
  font-weight:600;
  transition:transform var(--motion-fast) var(--ease-standard), background-color var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) var(--ease-standard), filter var(--motion-fast) var(--ease-standard);
}
.ui-btn:hover,
.top-controls .btn:hover{
  background:var(--ui-btn-bg-hover);
  transform:translateY(-1px);
  box-shadow:var(--ui-shadow-sm);
}
.ui-btn:active,
.top-controls .btn:active{
  transform:translateY(0) scale(.98);
  filter:saturate(1.08);
}
.btn-secondary{background:#64748b;}
.btn-secondary:hover{background:#475569;}
.btn-danger{background:#ef4444;}
.btn-danger:hover{background:#dc2626;}
.palette{display:flex;flex-wrap:wrap;gap:10px;min-height:60px;border-radius:10px;transition: background 0.3s ease;}
.color-box{width:100px;height:100px;border-radius:10px;display:flex;align-items:center;justify-content:center;position:relative;cursor:pointer;transition:transform 0.2s, box-shadow 0.2s;}
.color-box:hover{transform:scale(1.05);box-shadow:0 4px 12px rgba(0,0,0,0.3);}
.color-code{font-size:12px;text-align:center;pointer-events:none;}
.delete-btn{position:absolute;top:5px;right:5px;background:#ff4d4d;border:none;color:#fff;border-radius:50%;width:20px;height:20px;cursor:pointer;opacity:0.8;}
.delete-btn:hover{opacity:1;}
#cssSnippet{background:var(--snippet-bg);color:var(--snippet-text);padding:10px;border-radius:5px;overflow-x:auto;white-space:pre-wrap;}
.tool-container { padding:14px; }
.palette { display:flex; margin-top:10px; min-height:50px; border:1px solid #555; border-radius:6px; }
.color-stop { flex:1; height:50px; position:relative; cursor:grab; display:flex; align-items:center; justify-content:center; color:#fff; font-size:12px; user-select:none; }
.color-stop input { position:absolute; top:-9999px; }
.btn { margin:0; padding:8px 10px; cursor:pointer; }
.toast { position:fixed; bottom:10px; left:50%; transform:translateX(-50%); background:#333; color:#fff; padding:6px 12px; border-radius:4px; opacity:0; transition:0.3s; z-index:9999; }
.top-controls input[type="text"],
.top-controls input[type="color"],
.top-controls input[type="file"],
.top-controls .btn{
  width:100%;
  box-sizing:border-box;
}
#cssSnippet{
  margin-top:12px;
  min-height:120px;
  line-height:1.45;
}
@media (max-width: 1200px){
  .tool-container{max-width:1000px;}
  .tool-layout{grid-template-columns:250px minmax(0, 1fr);gap:14px;}
  .history-list{max-height:220px;}
}

@media (max-width: 1024px){
  .tool-container{padding:12px;}
  .tool-layout{
    grid-template-columns:1fr;
    grid-template-areas:
      "main"
      "sidebar";
    gap:12px;
  }
  .tool-main{min-height:180px;}
  .tool-sidebar{
    position:relative;
    top:auto;
  }
  body.focus-mode .tool-layout{
    grid-template-columns:1fr;
    grid-template-areas:"main";
  }
  body.focus-mode .tool-sidebar{
    display:none;
  }
  .top-controls{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:8px;
  }
  .top-controls input[type="color"]{min-height:42px;}
}

@media (max-width: 768px){
  .tool-container{
    margin:12px auto;
    padding:10px;
    border-radius:12px;
  }
  .tool-sidebar,
  .tool-main{
    padding:10px;
    border-radius:10px;
  }
  .top-controls{
    grid-template-columns:1fr;
  }
  .history-list{max-height:180px;}
  .history-item{
    grid-template-columns:18px 1fr auto;
  }
  .history-badge{display:none;}
  #cssSnippet{
    min-height:100px;
    font-size:12px;
  }
}

@media (max-width: 480px){
  .tool-container{
    margin:8px auto;
    padding:8px;
  }
  .sidebar-title{font-size:14px;}
  .history-header h4{font-size:12px;}
  .btn,
  .ui-btn{
    font-size:13px;
    padding:9px 10px;
  }
  .ui-input{padding:9px 10px;}
}
.palette { display:flex; flex-wrap:wrap; gap:4px; margin-top:10px; }
.color-stop { padding:4px 8px; border-radius:4px; color:#fff; position:relative; cursor:pointer; user-select:none; }
.delete-btn { position:absolute; top:-6px; right:-6px; background:#fff; color:#000; border-radius:50%; width:16px; height:16px; font-size:12px; line-height:16px; text-align:center; cursor:pointer; }
.toast { position:fixed; bottom:10px; left:50%; transform:translateX(-50%); background:#333; color:#fff; padding:6px 12px; border-radius:4px; opacity:0; transition:0.3s; z-index:9999; }
.palette-examples,
.color-psychology,
.build-palette,
.color-accessibility,
.palette-types{
  max-width:1000px;
  margin:70px auto;
  padding:30px;
  background:var(--panel-bg);
  border:1px solid #e5e7eb;
  border-radius:12px;
  box-shadow:0 6px 18px rgba(0,0,0,0.05);
}
.palette-examples h2,
.color-psychology h2,
.build-palette h2,
.color-accessibility h2,
.palette-types h2{
  font-size:28px;
  margin-bottom:15px;
  color:var(--title-color);
}
.palette-examples p,
.color-psychology p,
.build-palette p,
.color-accessibility p,
.palette-types p{
  color:var(--app-text);
  line-height:1.7;
}
.palette-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:20px;
  margin-top:30px;
}
.ui-card,
.palette-card,
.palette-type{
  background:var(--ui-card-bg);
  border:1px solid var(--ui-card-border);
  padding:20px;
  border-radius:var(--ui-radius-md);
  text-align:center;
  transition:0.25s;
}
.ui-card--interactive:hover,
.palette-card:hover,
.palette-type:hover{
  transform:translateY(-2px);
  box-shadow:var(--ui-shadow-md);
}
.colors{
  display:flex;
  gap:6px;
  margin:15px 0;
}
.ui-tag,
.colors span{
  flex:1;
  height:40px;
  border-radius:4px;
  border:1px solid rgba(148,163,184,0.25);
}
.tag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:4px 9px;
  border-radius:999px;
  font-size:11px;
  font-weight:600;
  background:var(--ui-tag-bg);
  color:var(--ui-tag-text);
  transition:transform var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) var(--ease-standard);
}
.tag:hover{
  transform:translateY(-1px);
  box-shadow:var(--ui-shadow-sm);
}
.psychology-list,
.accessibility-list{
  margin-top:20px;
  padding-left:20px;
}
.psychology-list li,
.accessibility-list li{
  margin-bottom:10px;
}
.palette-steps{
  margin-top:20px;
  padding-left:20px;
}
.palette-steps li{
  margin-bottom:15px;
}
.palette-types-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:20px;
  margin-top:30px;
}
body.theme-dark .palette-examples,
body.theme-dark .color-psychology,
body.theme-dark .build-palette,
body.theme-dark .color-accessibility,
body.theme-dark .palette-types{
  background:#1f2937;
  border-color:#374151;
  box-shadow:none;
}
body.theme-dark .palette-examples h2,
body.theme-dark .color-psychology h2,
body.theme-dark .build-palette h2,
body.theme-dark .color-accessibility h2,
body.theme-dark .palette-types h2{
  color:#f9fafb;
}
body.theme-dark .palette-examples p,
body.theme-dark .color-psychology p,
body.theme-dark .build-palette p,
body.theme-dark .color-accessibility p,
body.theme-dark .palette-types p{
  color:#d1d5db;
}
body.theme-dark .palette-card,
body.theme-dark .palette-type{
  background:var(--ui-card-bg);
  border-color:var(--ui-card-border);
}
body.theme-dark .history-group-title{color:#94a3b8;}
body.theme-dark .history-time{color:#9ca3af;}
body.theme-dark .palette-card:hover,
body.theme-dark .palette-type:hover{
  box-shadow:0 8px 20px rgba(0,0,0,0.4);
}
.intro-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: center;
  justify-content: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 6px 16px rgba(15,23,42,0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.intro-grid:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.12);
}
.intro-image {
  flex: 1 1 400px;
  min-width: 300px;
  max-width: 600px;
  overflow: hidden;
  border-radius: 16px;
}
.intro-image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
  transition: transform 0.4s ease;
}
.intro-image:hover img {
  transform: scale(1.05);
}
.intro-image figcaption {
  font-size: 0.8rem;
  color: #6b7280;
  margin-top: 0.5rem;
  text-align: center;
}
.intro-image figcaption a {
  color: #2563eb;
  text-decoration: none;
}
.intro-image figcaption a:hover {
  text-decoration: underline;
}
.intro-text {
  flex: 1 1 400px;
  min-width: 280px;
  max-width: 700px;
}
.intro-text h2 {
  font-size: 1.8rem;
  margin-bottom: 1rem;
  color: #111827;
}
.intro-text p {
  font-size: 1rem;
  line-height: 1.6;
  color: #374151;
  margin-bottom: 1rem;
}
.intro-text strong {
  color: #2563eb;
}
@media (max-width: 900px) {
  .intro-grid {
    flex-direction: column;
    text-align: center;
  }
  .intro-text {
    max-width: 100%;
  }
}
body.theme-dark .intro-grid {
  background: #1f2937;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
body.theme-dark .intro-grid:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.6);
}
body.theme-dark .intro-image figcaption {
  color: #9ca3af;
}
body.theme-dark .intro-image figcaption a {
  color: #60a5fa;
}
body.theme-dark .intro-text h2 {
  color: #f9fafb;
}
body.theme-dark .intro-text p {
  color: #d1d5db;
}
body.theme-dark .intro-text strong {
  color: #60a5fa;
}
body.theme-dark .intro-image img:hover {
  transform: scale(1.05);
}

@keyframes fadeSlideIn{
  from{opacity:0;transform:translateY(6px);}
  to{opacity:1;transform:translateY(0);}
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation:none !important;
    transition:none !important;
    scroll-behavior:auto !important;
  }
}