/* ============================================================
   gifCut — shared styles
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700&family=Caveat:wght@500;600;700&family=JetBrains+Mono:wght@400;600&display=swap');

:root {
  --bg:        #f7f6f3;
  --paper:     #fffbf6;
  --ink:       #1a1a1a;
  --ink-2:     #444;
  --ink-3:     #888;
  --line:      #1a1a1a;
  --accent:    #2f5667;
  --accent-2:  #2d6cdf;
  --highlight: #d8e7ed;
  --grid:      rgba(20, 20, 20, 0.08);
  --shadow:    3px 3px 0 rgba(0,0,0,0.12);

  --font-zh:   'Noto Sans TC', sans-serif;
  --font-en:   'Caveat', cursive;
  --font-mono: 'JetBrains Mono', monospace;
}

[data-theme="dark"] {
  --bg:        #1c1d22;
  --paper:     #25272e;
  --ink:       #f3eee0;
  --ink-2:     #c4bfb0;
  --ink-3:     #807a6c;
  --line:      #f3eee0;
  --accent:    #a8bfc9;
  --accent-2:  #6ea1ff;
  --highlight: #2c3f4a;
  --grid:      rgba(243, 238, 224, 0.07);
  --shadow:    3px 3px 0 rgba(0,0,0,0.4);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-zh);
  font-size: 16px;
  line-height: 1.4;
}

body {
  background-image: radial-gradient(circle, var(--grid) 1px, transparent 1px);
  background-size: 20px 20px;
  min-height: 100vh;
}

/* ---------- primitives ---------- */

.sk-box {
  border: 2px solid var(--line);
  background: var(--paper);
  border-radius: 8px;
  position: relative;
  box-shadow: var(--shadow);
}

.sk-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: 2px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-en);
  font-size: 20px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 8px;
  box-shadow: var(--shadow);
  transition: transform 0.08s, box-shadow 0.08s;
  text-decoration: none;
  user-select: none;
}
.sk-btn:hover  { transform: translate(-1px,-1px); box-shadow: 4px 4px 0 rgba(0,0,0,0.15); }
.sk-btn:active { transform: translate(2px,2px);   box-shadow: 1px 1px 0 rgba(0,0,0,0.15); }
.sk-btn.is-active { background: var(--ink); color: var(--paper); }
.sk-btn.accent    { background: var(--accent); color: #fff; border-color: var(--line); }
.sk-btn:disabled  { opacity: 0.55; cursor: not-allowed; transform: none; pointer-events: none; }

.sk-input {
  border: 2px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 16px;
  padding: 4px 10px;
  border-radius: 8px;
  width: 80px;
  text-align: center;
  outline: none;
}
.sk-input:focus { background: var(--highlight); }

/* Chinese labels */
.sk-label {
  font-family: var(--font-zh);
  font-size: 16px;
  font-weight: 500;
  color: var(--ink-2);
}

.sk-mono { font-family: var(--font-mono); }

/* squiggly underline */
.sk-underline { position: relative; display: inline-block; }
.sk-underline::after {
  content: '';
  position: absolute;
  left: -4px; right: -4px; bottom: -6px;
  height: 6px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 6'><path d='M0 3 Q 10 0 20 3 T 40 3 T 60 3' stroke='%239fbbc7' stroke-width='2' fill='none'/></svg>");
  background-repeat: repeat-x;
  background-size: 60px 6px;
}

/* tabs — Chinese labels → Noto Sans TC */
.sk-tabs { display: flex; border-bottom: 2px solid var(--line); }
.sk-tab {
  padding: 8px 18px;
  border: 2px solid var(--line);
  border-bottom: none;
  background: var(--bg);
  font-family: var(--font-zh);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  margin-right: -2px;
  margin-bottom: -2px;
  color: var(--ink-2);
  border-radius: 8px 8px 0 0;
}
.sk-tab.active {
  background: var(--paper);
  color: var(--ink);
  font-weight: 700;
  border-bottom: 2px solid var(--paper);
  z-index: 1;
}

/* dashed dropzone */
.sk-drop {
  border: 2px dashed var(--line);
  background: var(--paper);
  border-radius: 8px;
  padding: 20px;
  text-align: center;
  cursor: pointer;
  position: relative;
  transition: background 0.15s;
}
.sk-drop:hover, .sk-drop.dragover { background: var(--highlight); }

/* striped placeholder */
.sk-placeholder {
  background: repeating-linear-gradient(45deg, transparent, transparent 8px, var(--grid) 8px, var(--grid) 9px);
  border: 2px dashed var(--ink-3);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: 12px;
}

/* scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--ink-3); border-radius: 4px; border: 2px solid var(--bg); }