:root {
  --ink: #111827;
  --muted: #667085;
  --line: rgba(219, 224, 232, .72);
  --surface: rgba(255, 255, 255, .82);
  --shadow: 0 8px 28px rgba(31, 41, 55, .045);
}

* { box-sizing: border-box; }
html { min-width: 320px; background: #f7f8fa; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  background:
    radial-gradient(circle at 8% 5%, rgba(216, 236, 239, .3), transparent 31rem),
    radial-gradient(circle at 92% 52%, rgba(229, 233, 247, .28), transparent 34rem),
    linear-gradient(155deg, #fbfbfa 0%, #f7f9fb 58%, #fafafa 100%);
  -webkit-font-smoothing: antialiased;
}
button, a { font: inherit; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }

.site-header {
  height: 92px;
  padding: 0 max(32px, calc((100vw - 1376px) / 2));
  border-bottom: 1px solid rgba(222, 226, 233, .68);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, .64);
  backdrop-filter: blur(18px);
}
.brand { display: flex; align-items: center; gap: 15px; font-weight: 750; font-size: 24px; letter-spacing: -.025em; }
.whale { display: grid; place-items: center; width: 46px; height: 46px; font-size: 36px; filter: drop-shadow(0 5px 5px rgba(44, 86, 120, .14)); }
.header-actions { display: flex; gap: 12px; }
.button { min-height: 46px; padding: 0 22px; border-radius: 11px; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; transition: transform .18s, box-shadow .18s; }
.button:hover { transform: translateY(-1px); }
.button-primary { color: white; background: linear-gradient(145deg, #182137, #0b1020); border-color: #11182a; box-shadow: 0 7px 18px rgba(13, 20, 38, .17); }
.button-secondary { background: rgba(255,255,255,.88); box-shadow: 0 4px 14px rgba(20,32,55,.045); }
.mobile-label { display: none; }

.page-shell { width: min(1376px, calc(100% - 64px)); margin: 26px auto 40px; }
.panel { border: 1px solid var(--line); border-radius: 17px; background: var(--surface); box-shadow: var(--shadow); }
.featured-section { padding: 21px 24px 26px; }
.section-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.section-heading h1, .section-heading h2 { margin: 0; display: flex; align-items: center; gap: 12px; line-height: 1; letter-spacing: -.018em; }
.section-heading h1 { font-size: 23px; }.section-heading h2 { font-size: 19px; }
.diamond { width: 14px; height: 14px; border: 1.6px solid #8a93a5; transform: rotate(45deg); border-radius: 2px; }
.heading-chevron { display: none; font-size: 28px; }
.line-icon { width: 18px; height: 18px; border: 1.6px solid #8b95a8; border-radius: 50%; position: relative; flex: 0 0 auto; }
.icon-search::after { content:""; position:absolute; width:7px; height:1.5px; background:#8b95a8; right:-5px; bottom:-2px; transform:rotate(45deg); }
.icon-image { border-radius: 3px; }.icon-image::after { content:"⌁"; position:absolute; left:2px; top:-4px; font-size:18px; }.icon-pen { border-radius:2px; transform:rotate(-45deg); width:7px; margin:0 5px; }.icon-globe::after { content:"+"; position:absolute; inset:-4px 0 0; text-align:center; color:#8b95a8; }

.featured-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.featured-card { min-width: 0; min-height: 120px; border: 1px solid; border-radius: 16px; padding: 18px 20px; display: flex; align-items: center; gap: 20px; transition: transform .2s, box-shadow .2s; }
.featured-card:hover, .small-card:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(25,38,65,.075); }
.featured-card.chatgpt { background: linear-gradient(115deg, #fbfffd, #eff9f6); border-color: rgba(187, 222, 212, .75); }
.featured-card.gemini { background: linear-gradient(115deg, #fff, #f0f6ff); border-color: rgba(191, 210, 237, .75); }
.featured-card.claude { background: linear-gradient(115deg, #fff, #fff5ef); border-color: rgba(229, 204, 188, .76); }
.featured-card.custom { background:linear-gradient(115deg,#fff,color-mix(in srgb,var(--tool-theme) 8%,white)); border-color:color-mix(in srgb,var(--tool-theme) 28%,#e1e5eb); }
.tool-logo { flex: 0 0 76px; width: 76px; height: 76px; padding: 11px; border-radius: 20px; display: grid; place-items: center; background: rgba(255,255,255,.86); box-shadow: 0 7px 17px rgba(25,38,65,.1); }
.tool-logo img { width:100%; height:100%; object-fit:contain; border-radius:12px; }
.featured-copy { min-width: 0; display: grid; gap: 8px; }.featured-copy strong { font-size: 22px; }.featured-copy small { font-size: 15px; color: #596277; }
.arrow, .small-arrow { margin-left: auto; flex:0 0 auto; display: grid; place-items: center; border: 1px solid #d4d9e2; border-radius: 50%; background: rgba(255,255,255,.78); }
.arrow { width: 34px; height: 34px; font-size: 19px; }

.groups-grid { margin-top: 20px; display: grid; grid-template-columns: 1.55fr .82fr .92fr; gap: 20px; align-items:start; }
.tool-group { padding: 21px; min-width: 0; }
.section-heading.compact { margin-bottom: 17px; }
.tool-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.group-1 .tool-list { grid-template-columns: repeat(2, minmax(0,1fr)); }
.group-1 { grid-row: span 2; }.group-4 { grid-column: 2 / 4; }
.group-4 .tool-list { grid-template-columns: repeat(3,minmax(0,1fr)); }
.small-card { min-width: 0; min-height: 82px; padding: 12px 14px; border: 1px solid rgba(222,226,233,.82); border-radius: 13px; background: rgba(255,255,255,.62); display: flex; align-items:center; gap:12px; transition: transform .2s, box-shadow .2s; }
.small-logo { width: 52px; height: 52px; flex: 0 0 52px; border-radius: 14px; padding: 5px; display:grid; place-items:center; background:#fff; box-shadow:0 4px 12px rgba(31,41,55,.07); }
.small-logo img { width:100%; height:100%; object-fit:contain; border-radius:9px; }
.small-copy { min-width:0; display:grid; gap:5px; }.small-copy strong { font-size:15px; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.small-copy small { color:var(--muted); font-size:13px; line-height:1.2; white-space:nowrap; }
.small-arrow { display:none; }

@media (min-width: 1121px) {
  .group-2 .small-card, .group-3 .small-card { min-height:112px; padding:12px 8px; flex-direction:column; justify-content:center; text-align:center; gap:7px; }
  .group-2 .small-logo, .group-3 .small-logo { width:48px; height:48px; flex-basis:48px; }
  .group-2 .small-copy, .group-3 .small-copy { gap:4px; }
  .group-2 .small-copy strong, .group-3 .small-copy strong { overflow:visible; font-size:14px; }
}

.demo-dialog { width: min(420px, calc(100% - 40px)); padding: 34px; border: 1px solid #e0e4ec; border-radius: 20px; color: var(--ink); text-align: center; box-shadow: 0 30px 80px rgba(15,23,42,.22); }
.demo-dialog::backdrop { background: rgba(16,24,43,.28); backdrop-filter: blur(4px); }.dialog-close { position:absolute; top:12px; right:14px; border:0; background:none; font-size:28px; cursor:pointer; color:#758096; }.dialog-icon { width:55px; height:55px; margin:auto; display:grid; place-items:center; border-radius:16px; color:white; font-size:25px; background:linear-gradient(145deg,#182138,#0c1121); }.demo-dialog h2 { margin:20px 0 9px; }.demo-dialog p { margin:0 0 24px; line-height:1.7; color:var(--muted); }.dialog-confirm { width:100%; }

@media (min-width: 901px) and (max-width: 1120px) {
  .page-shell { width:calc(100% - 48px); }
  .featured-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .featured-card:nth-child(3) { grid-column:1 / 3; }
  .groups-grid { grid-template-columns:1fr 1fr; }
  .group-1 { grid-row:auto; grid-column:1 / 3; }.group-1 .tool-list { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .group-4 { grid-column:1 / 3; }
}

@media (max-width: 900px) and (min-width: 681px) {
  .page-shell { width:calc(100% - 44px); }
  .featured-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .featured-card { min-height:104px; }.featured-card:nth-child(3) { grid-column:1 / 3; }.tool-logo { width:64px; height:64px; flex-basis:64px; border-radius:17px; }
  .groups-grid { grid-template-columns:1fr 1fr; }.group-1 { grid-column:1 / 3; grid-row:auto; }.group-1 .tool-list { grid-template-columns:repeat(3,minmax(0,1fr)); }.group-4 { grid-column:1 / 3; }
}

@media (max-width: 680px) {
  .site-header { height:108px; padding:24px 15px 10px; border-bottom:0; }.brand { gap:8px; font-size:19px; }.whale { width:36px; height:36px; font-size:28px; }.header-actions { gap:7px; }.button { min-height:44px; padding:0 12px; border-radius:10px; }.desktop-label { display:none; }.mobile-label { display:inline; }
  .page-shell { width:calc(100% - 20px); margin:14px auto 28px; }.panel { border-radius:16px; }.featured-section { padding:18px 14px 19px; }.section-heading { margin:0 5px 16px; }.section-heading h1 { font-size:20px; }.heading-chevron { display:block; }
  .featured-grid { grid-template-columns:1fr; gap:10px; }.featured-card { min-height:104px; padding:15px 14px; gap:16px; border-radius:14px; }.tool-logo { width:64px; height:64px; flex-basis:64px; padding:8px; border-radius:17px; }.featured-copy { gap:6px; }.featured-copy strong { font-size:20px; }.featured-copy small { font-size:15px; }.arrow { width:32px; height:32px; }
  .groups-grid { margin-top:12px; grid-template-columns:1fr; gap:12px; }.tool-group, .group-1, .group-4 { grid-column:auto; grid-row:auto; padding:17px 14px; }.section-heading.compact { margin:0 3px 14px; }.section-heading.compact h2 { font-size:18px; }
  .tool-list, .group-1 .tool-list, .group-4 .tool-list { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
  .small-card { min-height:80px; padding:10px; gap:9px; }.small-logo { width:47px; height:47px; flex-basis:47px; border-radius:12px; }.small-copy { gap:4px; }.small-copy strong { font-size:14px; }.small-copy small { font-size:12px; }.small-arrow { display:none; }
}

@media (max-width: 370px) { .brand { font-size:17px; }.button { padding-inline:9px; }.small-logo { width:44px; height:44px; flex-basis:44px; }.small-card { padding-inline:8px; gap:7px; }.small-copy strong { font-size:13px; }.small-copy small { font-size:11px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition:none!important; } }

/* Stage 2 management controls: hidden completely in normal browsing mode. */
.tool-item { display: contents; }
.tool-controls, .category-controls, .admin-bar { display: none; }
.admin-bar {
  width: min(1376px, calc(100% - 64px));
  min-height: 58px;
  margin: 16px auto -10px;
  padding: 7px 10px 7px 18px;
  align-items: center;
  justify-content: space-between;
  border: 1px solid rgba(196, 207, 224, .72);
  border-radius: 14px;
  background: rgba(244, 247, 252, .9);
  box-shadow: 0 6px 20px rgba(31, 41, 55, .04);
}
.admin-mode .admin-bar { display: flex; }
.admin-status { display:flex; align-items:center; gap:9px; font-weight:650; font-size:14px; }
.admin-status i { width:8px; height:8px; border-radius:50%; background:#22a06b; box-shadow:0 0 0 4px rgba(34,160,107,.12); }
.admin-bar > div { display:flex; gap:6px; }
.admin-bar-button { min-height:44px; padding:0 15px; border:0; border-radius:9px; background:transparent; cursor:pointer; color:#465166; }
.admin-bar-button:hover { background:#fff; }

.admin-mode .tool-item { display:block; position:relative; min-width:0; }
.admin-mode .featured-card, .admin-mode .small-card { height:100%; }
.admin-mode .featured-card { padding-bottom:64px; }
.admin-mode .small-card { min-height:136px; padding-bottom:58px; }
.admin-mode .group-2 .small-card, .admin-mode .group-3 .small-card { min-height:154px; }
.admin-mode .tool-controls { position:absolute; z-index:3; display:flex; gap:5px; left:10px; right:10px; bottom:8px; padding-top:7px; border-top:1px solid rgba(216,222,231,.75); justify-content:flex-end; }
.control-button { width:44px; height:44px; flex:0 0 44px; padding:0; display:grid; place-items:center; border:1px solid rgba(210,216,226,.86); border-radius:10px; background:rgba(255,255,255,.94); color:#566176; cursor:pointer; font-size:18px; line-height:1; }
.control-button:hover { color:#111827; border-color:#b9c2d1; }.delete-tool:hover { color:#c13737; border-color:#ecc0c0; }.drag-handle { cursor:grab; }.drag-handle:active { cursor:grabbing; }
.control-button:disabled { opacity:.32; cursor:not-allowed; background:#f7f8fa; }
.admin-mode .category-controls { display:flex; margin-left:auto; gap:4px; }.category-controls .control-button { width:44px; height:44px; }
.admin-mode .section-heading.compact { min-height:44px; margin-top:-6px; }
.tool-item.is-dragging { opacity:.45; }
@media (min-width: 1121px) {
  .admin-mode .group-2 .tool-list, .admin-mode .group-3 .tool-list { grid-template-columns:1fr; }
  .admin-mode .group-2 .small-card, .admin-mode .group-3 .small-card { min-height:148px; }
}

.app-dialog { width:min(680px, calc(100% - 32px)); max-height:min(88vh, 820px); padding:0; border:1px solid rgba(218,223,232,.9); border-radius:20px; color:var(--ink); background:#fff; box-shadow:0 30px 90px rgba(15,23,42,.24); overflow:auto; }
.app-dialog::backdrop { background:rgba(17,24,39,.3); backdrop-filter:blur(5px); }
.login-dialog, .confirm-dialog { width:min(440px, calc(100% - 32px)); }
.dialog-form { padding:30px; position:relative; }
.dialog-close { position:absolute; z-index:2; top:14px; right:14px; width:44px; height:44px; border:0; border-radius:10px; background:transparent; font-size:27px; color:#737d90; cursor:pointer; }
.dialog-close:hover { background:#f4f6f9; }
.dialog-icon { width:54px; height:54px; margin-bottom:18px; display:grid; place-items:center; border-radius:16px; color:white; font-size:25px; background:linear-gradient(145deg,#182138,#0c1121); }
.dialog-title { padding-right:40px; margin-bottom:24px; }.dialog-title h2 { margin:0 0 7px; font-size:23px; letter-spacing:-.02em; }.dialog-title p { margin:0; color:var(--muted); font-size:14px; line-height:1.55; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:17px; }.field-wide { grid-column:1 / 3; }
.field { display:grid; gap:8px; min-width:0; }.field > span:first-child { font-size:14px; font-weight:650; }.field > small { color:var(--muted); font-size:12px; }
.field input:not([type=file]):not([type=color]), .field select { width:100%; height:46px; padding:0 13px; border:1px solid #d9dee7; border-radius:10px; background:#fff; color:var(--ink); outline:none; }
.field input:focus, .field select:focus { border-color:#8391a8; box-shadow:0 0 0 3px rgba(100,116,139,.1); }
.field input[type=file] { min-height:46px; padding:9px; border:1px dashed #ccd3df; border-radius:10px; background:#fafbfc; }
.simple-color { min-height:46px; padding:5px 10px 5px 5px; display:flex; align-items:center; gap:10px; border:1px solid #d9dee7; border-radius:10px; color:var(--muted); font-size:13px; }.simple-color input[type=color] { width:42px; height:34px; padding:2px; border:0; border-radius:7px; background:white; cursor:pointer; }
.form-error { min-height:20px; margin:14px 0 0; color:#c23838; font-size:13px; line-height:1.45; }
.dialog-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:8px; }.submit-button:disabled { opacity:.55; cursor:wait; transform:none; }.danger-button { min-height:46px; padding:0 22px; border:1px solid #bd3434; border-radius:11px; color:#fff; background:#c53c3c; cursor:pointer; }
.featured-confirm { min-height:44px; margin-top:15px; display:flex; align-items:center; gap:9px; font-size:14px; color:#a42e2e; }.featured-confirm input { width:18px; height:18px; }

.toast { position:fixed; z-index:100; left:50%; bottom:28px; max-width:calc(100% - 32px); padding:12px 18px; border-radius:11px; color:white; background:#162033; box-shadow:0 12px 36px rgba(15,23,42,.22); opacity:0; pointer-events:none; transform:translate(-50%,14px); transition:opacity .2s, transform .2s; font-size:14px; }.toast.is-visible { opacity:1; transform:translate(-50%,0); }.toast.error { background:#b73737; }

.tool-dialog { overflow:hidden; }
.tool-dialog .dialog-form { height:min(88vh,820px); max-height:100%; padding:0; display:grid; grid-template-rows:auto minmax(0,1fr) auto; }
.dialog-header { position:relative; padding:28px 30px 0; background:#fff; }.dialog-header .dialog-title { margin-bottom:20px; }.dialog-header .dialog-close { top:12px; right:14px; }
.tool-dialog .dialog-body { min-height:0; padding:2px 30px 24px; overflow-y:auto; overscroll-behavior:contain; scroll-padding:24px 0 120px; }
.tool-dialog .dialog-actions { margin:0; padding:14px 30px calc(14px + env(safe-area-inset-bottom)); border-top:1px solid #e7eaf0; background:rgba(255,255,255,.98); }
.advanced-settings { margin-top:20px; border:1px solid #e1e5ec; border-radius:12px; background:#fafbfc; }
.advanced-settings summary { min-height:48px; padding:0 14px; display:flex; align-items:center; justify-content:space-between; font-weight:650; font-size:14px; cursor:pointer; list-style:none; }.advanced-settings summary::-webkit-details-marker { display:none; }.advanced-settings summary::after { content:"＋"; font-size:19px; color:#687386; }.advanced-settings[open] summary::after { content:"−"; }
.advanced-fields { padding:4px 14px 16px; }

@media (max-width: 1120px) { .admin-bar { width:calc(100% - 48px); } }
@media (max-width: 680px) {
  .admin-bar { width:calc(100% - 20px); margin-top:10px; padding-left:13px; }.admin-bar-button { padding-inline:10px; }.admin-status { font-size:13px; }
  .admin-mode .small-card { min-height:206px; padding-bottom:112px; }.admin-mode .featured-card { min-height:216px; padding-bottom:112px; }
  .admin-mode .tool-controls { display:grid; grid-template-columns:44px 44px; justify-content:end; gap:5px; }
  .admin-mode .drag-handle { display:none; }
  .admin-mode .category-controls { margin-left:8px; }
  .dialog-form { padding:24px 18px; }.form-grid { grid-template-columns:1fr; gap:15px; }.field-wide { grid-column:auto; }.dialog-title { margin-bottom:20px; }.dialog-title h2 { font-size:21px; }
  .app-dialog { max-height:calc(100dvh - 16px); }.dialog-actions { position:sticky; bottom:-24px; margin:12px -18px -24px; padding:12px 18px calc(12px + env(safe-area-inset-bottom)); background:rgba(255,255,255,.96); border-top:1px solid #e7eaf0; }.dialog-actions .button, .dialog-actions .danger-button { flex:1; }
  .tool-dialog .dialog-form { height:calc(100dvh - 16px); max-height:calc(100dvh - 16px); }
  .dialog-header { padding:22px 18px 0; }.dialog-header .dialog-title { margin-bottom:16px; }.tool-dialog .dialog-body { padding:2px 18px 28px; scroll-padding-bottom:140px; }.tool-dialog .dialog-actions { position:static; margin:0; padding:12px 18px calc(12px + env(safe-area-inset-bottom)); }
  .advanced-fields { padding-inline:12px; }
}